使用 jquery 或 iframe 加载外部内容？答案

【问题标题】：Loading external content with jquery or iframe?使用 jquery 或 iframe 加载外部内容？
【发布时间】：2011-06-04 23:27:39
【问题描述】：

嗨，

我需要将一个现有网站包含到另一个网站中，如下所示：

a.mysite.com

我需要从我的这个网站获取内容

www.mysite.com

网站...

由于我需要访问 iframe 的内容，同源策略在这里会产生问题。我所做的是在 Apache 上配置 mod_proxy 以代理传递来自

的所有请求

www.mysite.com/a

到

a.mysite.com

这会很好......但我的问题是我不确定包含这些页面的最佳方法是什么。

1.想法

由于 iframe 的内容是一个功能齐全的网站，带有顶部导航...左导航等...我需要更改页面模板以仅显示内容框以便能够将该页面集成到iframe。

2。想法

我可以通过 JQuery.load() 加载内容所在的 DIV 并将其集成到我的网站中。

完成此类任务的最佳方法是什么？从 SEO 的角度来看，这两种想法有多糟糕？

【问题讨论】：

【解决方案1】：

除非涉及大量返工，否则最好的解决方案是将两者组合成一个在服务器端（使用服务器端包含）的 HTML 页面。

优势：

SEO 没有问题，因为它是作为单页交付的。 iFrames 中的内容和通过 AJAX 加载的内容（在 HTML 中带有关联的链接）被遍历，但只有链接，而不是 内容本身 与主页相关联。见：http://www.straightupsearch.com/search-marketing/best-practices/seo_iframes_a_g/
更快的页面加载 - 您的任一建议都会导致在加载其他内容之前先加载主页。
不依赖 Javascript - 如果不支持/打开 javascript，您的第二种方法将完全失败。
只包含一次所有 JS 和 CSS - 您的第一个方法将要求在每个页面的 <head> 中复制这些内容。如果您希望实现站点“a”的完全集成，这将更具长期优势。但是，它最初可能是一个缺点，见下文。

缺点：

如果您必须在您提出的两个选项中选择一个，我会不像其他人建议的那样选择第二个。决不应该通过 Ajax 加载大量静态内容，并且在这种情况下不会给您带来额外的好处。至少 iFrames 保证没有 JS 和 CSS 冲突。

【讨论】：

【解决方案2】：

使用第二种方法 (jQuery.load)，如果您使用的是 HTML5，对于支持 History API 的浏览器，您可以将 URL 更改为该 div 的任何内容。

查看 https://github.com/blog/760-the-tree-slider 以获取 github 如何为其树形滑块进行此操作的示例。

编辑：

我不确定使用 src 指向您自己的域的 iFrame 如何影响搜索排名，但充其量只是一个灰色区域。我会假设一些 pagerank 可能会从父级流向子级，但我不知道它是如何工作的，例如，如果博主使用指向另一个页面的 iframe 链接到您的页面。在Webmaster Help Forum

【讨论】：

但是我通过 jquery.load 获取的内容不会被 google..no 索引？我不能使用 html 5 :-/
如果您是通过渐进式增强方法获得的，那么您的页面上仍然会有搜索引擎可以抓取的链接；通过使用 AJAX 加载页面的一部分而不是整个页面，您只会增强用户体验。
如果您不能使用 HTML5 和 History API，我仍然建议您修改 URL，以便您的用户可以收藏和分享您的 URL，这里有一篇很好的帖子：stackoverflow.com/questions/2358928/…
我没有获取整个页面..只是页面的内容部分并将其放入我的主页的内容部分。我不知道你在我的页面中添加链接是什么意思
据我了解，您正在尝试实现类似于 Facebook 所做的事情，它只加载页面的一部分（主要内容）而不是加载整个页面（即包括标题和页脚和导航）。您能否提供更多关于您想要实现的目标以及您的限制因素的信息，以便我和其他人能够更好地回答您的问题？

【解决方案3】：

始终对 iframe 说不。 jQuery+Ajax 一路走来。

【讨论】：