使用iFrame的跨域Javascript调用 [英] Cross Domain Javascript calls using iFrame
本文介绍了使用iFrame的跨域Javascript调用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我要进行跨网域JavaScript调用。
1：SiteA：www.sub1.foo.com
2：在SiteA的iframe中打开SiteB：www.bar.com
3：在SiteB中进行一些操作后，通过javascript将一些值从SiteB传递给SiteA。 / p>
尝试1：
我按照文章，我按照＃2为我的设置。但我一直收到错误：
IE：无效参数
FF：非法document.domain值。 p>
尝试2：
跟随此 article 。
它可以在FF中使用。我可以使用window.parent.parent.MyFunction（），但在IE我得到权限被拒绝错误。
尝试3：
我甚至尝试了window.postMessage技术，但是我甚至不能得到这个工作。
有谁成功地实现跨域JS调用的情况如上所述。
或任何帮助/链接/建议。
解决方案
您可以实现window.postMessage跨iframe /
<！DOCTYPE html>
< html lang =en>
< head>
< meta http-equiv =content-typecontent =text / html; charset = utf-8/>
< title>< / title>
<！ -
< link rel =shortcut iconhref =/ favicon.ico>
< link rel =starthref =http://benalman.com/title =首页>
< link rel =stylesheettype =text / csshref =/ code / php / multi_file.php？m = benalman_css>
< script type =text / javascriptsrc =/ js / mt.js>< / script>
- >
< script type =text / javascript>
//什么浏览器支持window.postMessage立即调用？
// IE8不允许跨Windows / tabs的postMessage
// FF3 +，IE8 +，Chrome，Safari（5？），Opera10 +
函数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
//指定origin。应该是域或通配符*
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 +' ）不值得';
}
else {
message ='我从'+ evt.origin +''得到'+ evt.data +'
}
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）;
//对于符合标准的Web浏览器（ie9 +）
window.addEventListener（message，ReceiveMessage，false）;
}
else {
// alert（not standards-compliant（ie8））;
window.attachEvent（onmessage，ReceiveMessage）;
}
}
< / script>
< / head>
< body>
< iframe id =ifrmChildsrc =child.htmframeborder =0width =500height =200>< / iframe>
< br />
< input type =buttonvalue =Testonclick =SendMessage（）; />
< / body>
< / html>
Child.htm
<！DOCTYPE html>
< html lang =en>
< head>
< meta http-equiv =content-typecontent =text / html; charset = utf-8/>
< title>< / title>
<！ -
< link rel =shortcut iconhref =/ favicon.ico>
< link rel =starthref =http://benalman.com/title =首页>
< link rel =stylesheettype =text / csshref =/ code / php / multi_file.php？m = benalman_css>
< script type =text / javascriptsrc =/ js / mt.js>< / script>
- >
< script type =text / javascript>
/ *
// Opera 9支持document.postMessage（）
//文档错误
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 - 保存从其他窗口传递的消息的字符串。
// .domain（origin？） - 发送消息的窗口的域名。
// .uri - 发送消息的窗口的完整URI。
// .source - 对发送消息的窗口的窗口对象的引用。
function ReceiveMessage（evt）{
var message;
// if（evt.origin！==http://robertnyman.com）
if（false）
{
message ='You（'+ evt .origin +'）不值得';
}
else
{
message ='我有'+ 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。起源）;
evt.source.postMessage（thanks，got it，*）;
} // End Function ReceiveMessage
if（！window ['postMessage']）
alert（oh crap ）;
else {
if（window.addEventListener）{
// alert（standards-compliant）;
//对于符合标准的Web浏览器（ie9 +）
window.addEventListener（message，ReceiveMessage，false）;
}
else {
// alert（not standards-compliant（ie8））;
window.attachEvent（onmessage，ReceiveMessage）;
}
}
< / script>
< / head>
< body style =background-color：gray;>
< h1>测试< / h1>
< textarea id =taRecvMessagerows =20cols =20>< / textarea>
< / body>
< / html>
I want to have cross domain javascript call.
1: SiteA: www.sub1.foo.com
2: Open SiteB: www.bar.com in iframe from SiteA
3: Pass some value from SiteB to SiteA via javascript after some action in SiteB.
Try 1: I followed this article and I followed #2 for my setup. But I keep getting errors:
IE: Invalid Argument
FF:Illegal document.domain value.
Try 2: Followed this article.
It works in FF. I can use window.parent.parent.MyFunction() but in IE I get "Permission Denied" error.
Try 3: I even tried the window.postMessage technique but I am not even able to get that working.
Is anyone out there who has successfully implemented Cross Domain JS calls for situation like above. Or any help / links / suggestions.
解决方案
You can implement window.postMessage to communicate accross iframes/windows across domains.
<!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
<!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>
这篇关于使用iFrame的跨域Javascript调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
