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

时间:2009-10-02 16:38:09

标签: javascript url iframe get cross-domain

我正在实施一个“小部件”,它将包含在第三方网站的文章/故事页面上。此小部件位于&lt; iframe&gt;中托管在我们的域名上。它需要从其父页面(第三方网站)的文章中收集文本,然后使用该文本对返回相关内容的服务进行各种API调用,然后将其显示在我们的&lt; iframe&gt;中。窗口小部件。

由于跨域安全限制,我无法访问父页面的DOM,并且存在问题。我可以在父页面上放置我需要的任何代码(例如,一些解析我需要的内容的JavaScript),以及&lt; iframe&gt;也完全在我的控制之下,但我不确定如何将主页中的内容导入我的&lt; iframe&gt;因为它们托管在不同的域上。安全性非常重要,我想找到一种不会以任何方式妥协的方法。

我最初的想法是将页面内容从父页面传递到我的&lt; iframe src =“”&gt;使用查询参数的属性:

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

我可以使用&lt; script&gt;在父页面上收集文本,然后document.write一个&lt; iframe&gt;使用包含我的文本的字符串来创建动态“page_content”查询参数。然后,page_content参数可用于我的&lt; iframe&gt; document.href中的页面。

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

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

我的小部件中有jQuery可用,但不能依赖父页面中的纯JavaScript。

3 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

实际上,您可以使用name属性,它可以存储大量数据。

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

托管网站可能需要首先将iframes .src设置为本地页面,这将捕获父文档数据,放入其.name属性并重定向到有意网站。

答案 2 :(得分:0)

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

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

另一个警告:这里有安全隐患 - 请确保您信任其他域的脚本!