用 Ajax 替换 iframe答案

【问题标题】：Replace Iframe with Ajax用 Ajax 替换 iframe
【发布时间】：2013-06-20 16:57:57
【问题描述】：

我的项目是在我的网站中预览一些网站，我现在使用 iframe 来加载网站预览，然后用户可以在 iframe 中进行交互。

为了 SEO 的目的，我必须将 Iframe 实现更改为在页面内，所以可以替换的是 Jquery .load() 函数。

$('div#websitePreview').load('Website_URL');

但问题是当用户与网站交互时（单击某个链接）整个页面将重定向到新链接，所以有没有办法通过 ajax 加载用户在同一个 div 中单击的页面无需离开我的网站即可拨打电话？

更新： 我要预览的网站包含我原始网站的子域

【问题讨论】：

你能显示你的 HTML 代码吗？

标签： javascript jquery ajax iframe

【解决方案1】：

试试

$('div#websitePreview a').live('click', function(event){
   event.preventDefault();
   var url = $(this).attr('href');
   $('div#websitePreview').load(url);
}

【讨论】：

live 不再是 jQuery 的一部分，不应使用。应该使用带有委托事件处理程序的 delegate 或 on。

【解决方案2】：

假设您正在“预览”的网站与您的网站在同一个域中，您可以修改加载的div 中的每个a 标签，以使用以下代码执行 AJAX 请求：

var $container = $('#websitePreview')
$container.load('http://www.example.com'); // initial load

// link click within loaded content.
$container.on('click', 'a', function(e) {
    e.preventDefault();
    $container.load($(this).attr('href'));
});

另一方面，如果预览的站点位于不同的域中，由于同源策略，您无法从它们加载 HTML。在这些情况下，iframe 或 CORS 请求是您唯一的选择，如果 url 是第 3 方，则后者极不可能发生。

【讨论】：

【解决方案3】：

由于现代浏览器的跨域安全限制，无法实现这一点。不允许您通过 ajax 访问其他域内容。

另外一点是，如果您在网站的 div 中加载入口页面，您可能会遇到 css 错误，因为加载的 css 将覆盖您网站的 css。

【讨论】：

我要预览的网站有我原始网站的子域，抱歉我应该早点提一下
如果服务器支持CORS，当然可以跨域。