从文档中访问文档的文本 <iframe> 托管在其他域上

Question

我正在实现一个“小部件”，它将包含在第三方网站的文章/故事页面中。 该小部件位于我们域中托管的<iframe>中。 它需要从其父页面（第三方网站）的文章中收集文本，然后将其用于对返回相关内容的服务进行各种API调用，然后将其显示在我们的<iframe>小部件中。

由于跨域安全性限制，我无法访问父页面的DOM，这就是问题所在。 我几乎可以将任何需要的代码放在父页面上（例如，一些解析我所需内容的JavaScript），并且<iframe>也完全在我的控制之下，但我不确定如何将内容从宿主页面下载到我的<iframe>中，因为它们托管在不同的域中。 安全性非常重要，我想找到一种不会以任何方式妥协的方法。

我最初的想法是使用查询参数将页面内容从父页面传递到我的<iframe src =“”>属性中：

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

我可以在父页面上使用<script>来收集文本，然后document.write一个<iframe>，该iframe使用保存我的文本的字符串来创建动态的“ page_content”查询参数。 然后，page_content参数可用于document.href中的<iframe>页面。

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

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

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

Answer 1

如果您担心GET请求的数据过多，请改用POST请求。 您可以尝试类似以下问题的答案： “如何发布到iframe？” 。 然后，您可以将数据放在隐藏的文本区域中，并在父页面上使用JavaScript提交表单。

Answer 2

实际上，您可以为此使用name属性，它具有容纳大量数据的空间。

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

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

Answer 3

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

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

另一个警告：这里涉及安全性-确保您信任另一个域的脚本！