从托管在不同域上的 <iframe> 访问文档的文本答案

【问题标题】：Accessing a document's text from an <iframe> that's hosted on a different domain从托管在不同域上的 <iframe> 访问文档的文本
【发布时间】：2010-12-03 09:32:59
【问题描述】：

我正在实施一个“小部件”，它将包含在第 3 方网站的文章/故事页面中。这个小部件位于我们域中托管的中。它需要从其父页面（第 3 方网站）的文章中收集文本，然后使用这些文本对返回相关内容的服务进行各种 API 调用，然后显示在我们的 <iframe> 小部件中。 <p>由于跨域安全限制，我无法访问父页面的DOM，问题就出在这里。我可以在父页面上放置我需要的任何代码（例如，解析出我需要的内容的一些 JavaScript），并且 <iframe> 也完全在我的控制之下，但我不知道如何将主机页面中的内容获取到我的 <iframe> 中，因为它们托管在不同的域中。安全性非常重要，我想找到一种不会以任何方式损害安全性的方法。

我最初的想法是使用查询参数将页面内容从父页面传递到我的属性中：

<iframe src="http://www.mydomain.com/widget.html?page_content=This is some page content."></iframe>

我可以在父页面上使用

但是，我需要从父页面收集 8 KB 的文本，我的理解是 GET 请求有 1 KB 的限制 - 这是真的吗？如果没有，或者如果我可以在我的服务器上配置该限制，问题可能已经解决。

如果这将是一个限制，我还能如何发挥创意并将此文本传递到我的小部件中？这需要一个非常可扩展的解决方案，因为父网站每月获得数千万的页面浏览量。我也不想显着影响父页面的性能。

我的小部件中有可用的 jQuery，但除了父页面中的纯 JavaScript 之外，不能依赖任何东西。

【问题讨论】：

标签： javascript url iframe get cross-domain

【解决方案1】：

如果您担心 GET 请求的数据过多，请改用 POST 请求。您可以尝试类似这个问题的答案："How do you post to an Iframe?"。然后您可以将数据放在隐藏的文本区域中，并在父页面上使用 JavaScript 提交表单。

【讨论】：

感谢您的回复，wdebeaum - 这是一个很好的建议，但是这不会涉及到服务器访问，然后让 <iframe> 中的 JavaScript 可以访问该 POST 数据。小部件？我认为小部件没有办法访问 POST 数据，否则；性能在这里至关重要，所以我想尽可能避免额外的服务器旅行。在这种情况下，GET 请求的美妙之处在于它更多地被用作从不同域轻松访问某些文本（作为查询参数）的手段。
我不明白 POST 请求如何意味着相对于 GET 请求需要额外访问服务器...他们都去服务器以获取 iframe 的内容.然后，服务器可以以 iframe 中的 JavaScript 可以访问的方式将查询参数（无论是 GET 还是 POST）放入其回复中。如果你说设置 iframe 的 src 属性应该以某种方式传播到 document.href 属性而不实际从服务器请求页面，我不确定这是真的。

【解决方案2】：

其实，你可以使用 name 属性，它有空间容纳相当多的数据。

在托管页面上，您首先创建 iframe，设置其 .name 属性以包含所需的数据，然后设置 .src 属性以加载包含的站点。这现在可以访问自己的名称，从而访问数据。

托管站点可能需要先将 iframe .src 设置为本地页面，这将捕获父文档数据，放入其 .name 属性并重定向到 inteded 站点。

【讨论】：

【解决方案3】：

如果您可以控制这两个域，您可以尝试使用像 EasyXDM 这样的跨域脚本库，它包含跨浏览器的怪癖（包括 Sean 上面提到的 name 属性）并提供易于使用的 API用于在不同域之间使用该浏览器的最佳可用机制在客户端脚本中进行通信（例如，postMessage 如果可用，其他机制如果不可用）。

警告：您需要控制两个域才能使其正常工作（其中“控制”意味着您可以在两个域上放置静态文件）。但是您不需要任何服务器端代码更改。

另一个警告：这里存在安全隐患——确保您信任其他域的脚本！

【讨论】：