跨子域 iframe 和 JavaScript

Posted

技术标签:

【中文标题】跨子域 iframe 和 JavaScript【英文标题】:Cross sub domain iframes and JavaScript 【发布时间】:2011-08-28 03:24:14 【问题描述】:

我在一个 CMS 网站上工作,其域是:

http://www.acmssite.com

他们有一个存储表单系统的子域:

http://www.forms.acmssite.com

我在第一个有一个 iframe,它在后者中查看一个表单。

我需要运行脚本来从前者操作后者,我想知道这可能吗?

【问题讨论】:

【参考方案1】:

为了不受同源策略的限制,您可能需要在两个页面中都这样做:

document.domain = "acmssite.com";

【讨论】:

如果两者都在完全不同的域上,这会起作用吗? 没有。浏览器限制将 document.domain 设置为网页的同一个域或超域。例如,这是 Mozilla 的政策:developer.mozilla.org/en/DOM/document.domain 感谢您的提示:放置在两个页面中。如果可以的话,我会给你一个 +2。 此解决方案完美适用于 IE7、IE8、IE9、IE10、Firefox、Chrome 和 Opera,但不适用于最新的 IE11。我已经使用 2 个子域在所有这些浏览器上自己测试过:www.example.com 和 iframe.example.com – 主页和 iframe 都包含 document.domain = "example.com"; 似乎是 IE11 中的一个大回归,请让我知道任何解决方法谢谢! 解决上述注释 (IE11 bug reported here) 的方法是在 doctype 声明之后放置以下元标记 <meta http-equiv="x-ua-compatible" content="IE=10">。您必须使用有效的文档类型。【参考方案2】:

是的。

var iframe = document.getElementById("your-iframes-id").contentWindow.document;

【讨论】:

当 iframe 在子域中时,此代码不起作用。您需要使用“document.domain” 澄清 Mosh Feu 的意思:由于同源政策,它不起作用。浏览器抛出“阻止原点为“null”的框架访问跨域框架。”【参考方案3】:

即使您无权访问接收窗口的标题部分,您仍然可以在 YQL 的帮助下绕过此问题。使用 Postmessage 方法,您还需要编辑收件人窗口脚本。但是使用这种方法,您可以加载任何 iframe,而无需触及它们的脚本。看一下这个! jsfiddle-link

<html>
<iframe src="https://google.com/"  ></iframe>

<script>
var iframe = document.getElementsByTagName('iframe')[0];
var url = iframe.src;
var getData = function (data) 
    if (data && data.query && data.query.results && data.query.results.resources && data.query.results.resources.content && data.query.results.resources.status == 200) loadHTML(data.query.results.resources.content);
    else if (data && data.error && data.error.description) loadHTML(data.error.description);
    else loadHTML('Error: Cannot load ' + url);
;
var loadURL = function (src) 
    url = src;
    var script = document.createElement('script');
    script.src = 'https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20data.headers%20where%20url%3D%22' + encodeURIComponent(url) + '%22&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=getData';
    document.body.appendChild(script);
;
var loadHTML = function (html) 
    iframe.src = 'about:blank';
    iframe.contentWindow.document.open();
    iframe.contentWindow.document.write(html.replace(/<head>/i, '<head><base href="' + url + '"><scr' + 'ipt>document.addEventListener("click", function(e)  if(e.target && e.target.nodeName == "A")  e.preventDefault(); parent.loadURL(e.target.href);  );</scr' + 'ipt>'));
    iframe.contentWindow.document.close();


loadURL(iframe.src);
</script>
</html>

【讨论】:

以上是关于跨子域 iframe 和 JavaScript的主要内容,如果未能解决你的问题,请参考以下文章

ajax主域和子域之间的跨域问题

修改 iframe 中 div 元素的宽度和高度 - 跨域策略

iframe跨域通信方案

不同域iframe主动与父容器通讯的方法

如何实现跨域?(未完成)

当域和协议匹配时获取 iframe 内容高度,但子域不匹配