Question

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

我必须将Iframe实现更改为在页面内用于SEO目的，那么可以替换的是Jquery .load（）函数。

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

但问题是当用户与网站交互（点击某个链接）时，整个页面将重定向到新链接，那么有没有办法加载由ajax在同一个div中被用户点击的页面不离开我的网站打电话？

更新我要预览的网站有我原网站的子域名

Answer 1

由于现代浏览器中的跨域安全限制，无法实现此目的。您不能通过ajax访问其他域内容。

另一点是，如果您在网站上的div中加载了一个输入页面，则可能会出现css错误，因为加载的css会覆盖您网站的css。

Answer 2

假设您正在“预览”的网站与您的网站位于同一个域中，您可以修改已加载的a中的每个div标记，以使用以下代码执行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请求是您唯一的选择，如果网址是第三方，后者极不可能发生。

Answer 3

尝试

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

用Ajax替换iframe

3 个答案: