使用iFrame的跨域Javascript调用
我想进行跨域javascript调用 1:SiteA:www.sub1.foo.com 2:从SiteA在iframe中打开SiteB:www.bar.com 3:在SiteB中执行某些操作后,通过javascript将一些值从SiteB传递给SiteA 尝试1: 我遵循这一点,并遵循2进行设置。但我不断地犯错误: IE:无效参数 FF:非法文档。域值 尝试2: 然后呢 它在FF中工作。我可以使用window.parent.parent.MyFunction(),但在IE中我得到“权限被拒绝”错误 尝试3: 我甚至尝试了window.postMessage技术,但我甚至无法让它正常工作 是否有人成功实现了上述情况下的跨域JS调用。使用iFrame的跨域Javascript调用,javascript,jquery,internet-explorer,firefox,cross-domain,Javascript,Jquery,Internet Explorer,Firefox,Cross Domain,我想进行跨域javascript调用 1:SiteA:www.sub1.foo.com 2:从SiteA在iframe中打开SiteB:www.bar.com 3:在SiteB中执行某些操作后,通过javascript将一些值从SiteB传递给SiteA 尝试1: 我遵循这一点,并遵循2进行设置。但我不断地犯错误: IE:无效参数 FF:非法文档。域值 尝试2: 然后呢 它在FF中工作。我可以使用window.parent.parent.MyFunction(),但在IE中我得到“权限被拒绝”错
或任何帮助/链接/建议。我相信这是出于安全原因限制的。
前面在这里讨论了堆栈溢出:我做了如下操作:
不久前:)您可以实现window.postMessage来跨域跨iFrame/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>
//现在哪些浏览器支持window.postMessage调用?
//IE8不允许跨窗口/选项卡发送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
//指定原点。应为域或通配符“*”
if(win==null | |!window['postMessage'])
警惕(“哦,废话”);
其他的
win.postMessage(“你好”,“*”);
//警报(“lol”);
}
功能接收消息(evt){
var消息;
//如果(evt.origin!==”http://robertnyman.com")
if(false){
消息='您(“+evt.origin+”)不值得';
}
否则{
消息='我从'+evt.origin+'中获得'+evt.data+'';
}
var ta=document.getElementById(“taRecvMessage”);
if(ta==null)
警报(信息);
其他的
document.getElementById(“taRecvMessage”).innerHTML=message;
//evt.source.postMessage(“谢谢,明白了;)”,event.origin);
}//结束函数ReceiveMessage
如果(!window['postMessage'])
警惕(“哦,废话”);
否则{
if(window.addEventListener){
//警报(“符合标准”);
//适用于符合标准的web浏览器(ie9+)
window.addEventListener(“消息”,ReceiveMessage,false);
}
否则{
//警报(“不符合标准(ie8)”;
attachEvent(“onmessage”,ReceiveMessage);
}
}
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>
/*
//Opera9支持document.postMessage()
//文件是错的
window.addEventListener(“消息”,函数(e){
//document.getElementById(“test”).textContent=;
警觉的(
e、 域名+”表示:“+e.data
);
},假);
*/
// 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–对发送消息的窗口的窗口对象的引用。
功能接收消息(evt){
var消息;
//如果(evt.origin!==”http://robertnyman.com")
if(false)
{
消息='您(“+evt.origin+”)不值得';
}
其他的
{
消息='我从'+evt.origin+'中获得'+evt.data+'';
}
//警报(evt.source.location.href)
var ta=document.getElementById(“taRecvMessage”);
if(ta==null)
警报(信息);
其他的
document.getElementById(“taRecvMessage”).innerHTML=message;
// http://javascript.info/tutorial/cross-window-messaging-with-postmessage
//evt.source.postMessage(“谢谢,明白了”,evt.origin);
evt.source.postMessage(“谢谢,收到了”、“*”);
}//结束函数ReceiveMessage
如果(!window['postMessage'])
警惕(“哦,废话”);
否则{
if(window.addEventListener){
//警报(“符合标准”);
//适用于符合标准的web浏览器(ie9+)
window.addEventListener(“消息”,ReceiveMessage,false);
}
否则{
//警报(“不符合标准(ie8)”;
attachEvent(“onmessage”,ReceiveMessage);
}
}
试验
我尝试了很长时间,但始终无法让它工作。相反,我构建了一个chrome扩展,只要您将域添加到清单中,它将允许任何跨域请求…不确定这是否会对您的情况有所帮助,因为网站访问者不会仅仅为了查看您的网站而安装扩展。@Johnny:不,这种扩展方式对我不起作用。我希望有办法因为第二个链接解决方案适用于FF,但是