使用iFrame的跨域Javascript调用

编程入门行业动态更新时间:2024-10-10 23:24:07

本文介绍了使用iFrame的跨域Javascript调用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述

我要进行跨网域JavaScript调用。

1：SiteA：www.sub1.foo

2：在SiteA的iframe中打开SiteB：www.bar

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 =benalman/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; // robertnyman/2010/03/18/postmessage-in-html5-to-send-messages-between-windows-and-iframes/ // stackoverflow/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！==robertnyman） 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 =benalman/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） ; * / // developer.mozilla/en-US/docs/Web/API/window.postMessage // http：// ejohn / blog / cross-window-messaging / // benalman/projects/jquery-postmessage-plugin/ // benalman/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！==robertnyman） 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; // 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

2: Open SiteB: www.bar 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>  <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; // robertnyman/2010/03/18/postmessage-in-html5-to-send-messages-between-windows-and-iframes/ // stackoverflow/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 !== "robertnyman") 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>  <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); */ // developer.mozilla/en-US/docs/Web/API/window.postMessage // ejohn/blog/cross-window-messaging/ // benalman/projects/jquery-postmessage-plugin/ // benalman/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 !== "robertnyman") 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; // 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调用

本文发布于:2023-11-28 12:46:02，感谢您对本站的认可！

本文链接:https://www.elefans.com/category/jswz/34/1642457.html