使用 iFrame 跨域 Javascript 调用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7246278/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Cross Domain Javascript calls using iFrame
提问by gbs
I want to have cross domain javascript call.
我想要跨域 javascript 调用。
1: SiteA: www.sub1.foo.com
1：站点A：www.sub1.foo.com
2: Open SiteB: www.bar.com in iframe from SiteA
2：在SiteA的iframe中打开SiteB：www.bar.com
3: Pass some value from SiteB to SiteA via javascript after some action in SiteB.
3：在 SiteB 中执行某些操作后，通过 javascript 将一些值从 SiteB 传递到 SiteA。
Try 1:I followed this articleand I followed #2 for my setup. But I keep getting errors:
尝试 1：我按照这篇文章进行操作，然后按照 #2 进行设置。但我不断收到错误：
IE: Invalid Argument
IE：无效参数
FF:Illegal document.domain value.
FF：非法的 document.domain 值。
Try 2:Followed this article.
尝试 2：关注这篇文章。
It works in FF. I can use window.parent.parent.MyFunction() but in IE I get "Permission Denied" error.
它适用于 FF。我可以使用 window.parent.parent.MyFunction() 但在 IE 中我收到“权限被拒绝”错误。
Try 3:I even tried the window.postMessage technique but I am not even able to get that working.
尝试 3：我什至尝试了 window.postMessage 技术，但我什至无法让它工作。
Is anyone out there who has successfully implemented Cross Domain JS calls for situation like above. Or any help / links / suggestions.
有没有人成功实现了跨域 JS 调用，以应对上述情况。或任何帮助/链接/建议。
回答by Stefan Steiger
You can implement window.postMessage to communicate accross iframes/windows across domains.
您可以实现 window.postMessage 跨域跨 iframes/windows 进行通信。
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<!--
<link rel="shortcut icon" href="/favicon.ico">
<link rel="start" href="http://benalman.com/" title="Home">
<link rel="stylesheet" type="text/css" href="/code/php/multi_file.php?m=benalman_css">
<script type="text/javascript" src="/js/mt.js"></script>
-->
<script type="text/javascript">
// What browsers support the window.postMessage call now?
// IE8 does not allow postMessage across windows/tabs
// FF3+, IE8+, Chrome, Safari(5?), Opera10+
function SendMessage()
{
var win = document.getElementById("ifrmChild").contentWindow;
// http://robertnyman.com/2010/03/18/postmessage-in-html5-to-send-messages-between-windows-and-iframes/
// http://stackoverflow.com/questions/16072902/dom-exception-12-for-window-postmessage
// Specify origin. Should be a domain or a wildcard "*"
if (win == null || !window['postMessage'])
alert("oh crap");
else
win.postMessage("hello", "*");
//alert("lol");
}
function ReceiveMessage(evt) {
var message;
//if (evt.origin !== "http://robertnyman.com")
if (false) {
message = 'You ("' + evt.origin + '") are not worthy';
}
else {
message = 'I got "' + evt.data + '" from "' + evt.origin + '"';
}
var ta = document.getElementById("taRecvMessage");
if (ta == null)
alert(message);
else
document.getElementById("taRecvMessage").innerHTML = message;
//evt.source.postMessage("thanks, got it ;)", event.origin);
} // End Function ReceiveMessage
if (!window['postMessage'])
alert("oh crap");
else {
if (window.addEventListener) {
//alert("standards-compliant");
// For standards-compliant web browsers (ie9+)
window.addEventListener("message", ReceiveMessage, false);
}
else {
//alert("not standards-compliant (ie8)");
window.attachEvent("onmessage", ReceiveMessage);
}
}
</script>
</head>
<body>
<iframe id="ifrmChild" src="child.htm" frameborder="0" width="500" height="200" ></iframe>
<br />
<input type="button" value="Test" onclick="SendMessage();" />
</body>
</html>
Child.htm
儿童.htm
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<!--
<link rel="shortcut icon" href="/favicon.ico">
<link rel="start" href="http://benalman.com/" title="Home">
<link rel="stylesheet" type="text/css" href="/code/php/multi_file.php?m=benalman_css">
<script type="text/javascript" src="/js/mt.js"></script>
-->
<script type="text/javascript">
/*
// Opera 9 supports document.postMessage()
// document is wrong
window.addEventListener("message", function (e) {
//document.getElementById("test").textContent = ;
alert(
e.domain + " said: " + e.data
);
}, false);
*/
// https://developer.mozilla.org/en-US/docs/Web/API/window.postMessage
// http://ejohn.org/blog/cross-window-messaging/
// http://benalman.com/projects/jquery-postmessage-plugin/
// http://benalman.com/code/projects/jquery-postmessage/docs/files/jquery-ba-postmessage-js.html
// .data – A string holding the message passed from the other window.
// .domain (origin?) – The domain name of the window that sent the message.
// .uri – The full URI for the window that sent the message.
// .source – A reference to the window object of the window that sent the message.
function ReceiveMessage(evt) {
var message;
//if (evt.origin !== "http://robertnyman.com")
if(false)
{
message = 'You ("' + evt.origin + '") are not worthy';
}
else
{
message = 'I got "' + evt.data + '" from "' + evt.origin + '"';
}
//alert(evt.source.location.href)
var ta = document.getElementById("taRecvMessage");
if(ta == null)
alert(message);
else
document.getElementById("taRecvMessage").innerHTML = message;
// http://javascript.info/tutorial/cross-window-messaging-with-postmessage
//evt.source.postMessage("thanks, got it", evt.origin);
evt.source.postMessage("thanks, got it", "*");
} // End Function ReceiveMessage
if (!window['postMessage'])
alert("oh crap");
else {
if (window.addEventListener) {
//alert("standards-compliant");
// For standards-compliant web browsers (ie9+)
window.addEventListener("message", ReceiveMessage, false);
}
else {
//alert("not standards-compliant (ie8)");
window.attachEvent("onmessage", ReceiveMessage);
}
}
</script>
</head>
<body style="background-color: gray;">
<h1>Test</h1>
<textarea id="taRecvMessage" rows="20" cols="20" ></textarea>
</body>
</html>
回答by hellosmithy
I believe this is restricted for security reasons. It's been discussed previously on Stack Overflow here: <iframe> javascript access parent DOM across domains?
我相信这是出于安全原因而受到限制的。之前已经在 Stack Overflow 上讨论过：<iframe> javascript access parent DOM across domain?
回答by Walialu
I did something like this: http://blog.johnmckerrell.com/2006/10/22/resizing-iframes-across-domains/
我做了这样的事情：http: //blog.johnmckerrell.com/2006/10/22/resizing-iframes-across-domains/
some time ago :)
前一段时间 ：）
