logo标签列表

跨子域iframe和JavaScript

javascriptiframecross-domainsubdomain
33
我正在处理一个CMS网站，其域名为：
http://www.acmssite.com

他们有一个子域，用于存储表单系统：

http://www.forms.acmssite.com

我在第一个页面有一个iframe，它查看后面的一个表单。

我需要运行脚本来从前面的iframe中操作后面的表单，想知道这是否可行？

3个回答
78
为了避免受到同源策略的限制，你可能需要在这两个页面中都执行此操作。
document.domain = "acmssite.com";
2
如果它们在完全不同的域上，这个能行吗？ - RyanP13
3
浏览器会限制将 document.domain 设置为与当前网页相同域名或其父域名。例如，这是 Mozilla 的政策：https://developer.mozilla.org/en/DOM/document.domain - Dark Falcon
5
谢谢您的建议：将其放置在两个页面中。如果我能的话，我会给您加上+2分。 - Praesagus
这个解决方案在IE7、IE8、IE9、IE10、Firefox、Chrome和Opera上都能完美运行，但是__无法在最新的IE11上工作__。我已经使用2个子域名www.example.com和iframe.example.com进行了测试——主页面和iframe都包含`document.domain="example.com";`。看起来在IE11中有一个很大的退步，请让我知道是否有任何解决方法，谢谢！ - Community
2
解决上述评论（在此报告IE11错误）的方法是在文档类型声明后面放置以下元标记<meta http-equiv="x-ua-compatible" content="IE=10">。您必须使用有效的文档类型声明。 - Community
显示剩余3条评论
3
是的，没错。
var iframe = document.getElementById("your-iframes-id").contentWindow.document;
1
当 iframe 在子域中时，此代码无法正常工作。您需要使用 "document.domain"。 - Mosh Feu
1
澄清一下Mosh Feu的意思：它由于同源策略而无法工作。浏览器会抛出“阻止了一个具有null来源的框架访问跨源框架”的错误。 - Martin Thoma
-1

即使您无法访问接收窗口的头部，仍然可以借助YQL解决此问题。使用Postmessage方法，您还需要编辑接收方窗口脚本。但是使用此方法，您可以加载任何iframe而不触及其脚本。看看这个！jsfiddle-link

<html>
<iframe src="https://google.com/" width="500" height="300"></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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接