前端跨域问题及解决方案(3)
2023-04-30 来源:飞速影视
如果是与iframe通信的场景就需要把iframe的src设置成当前域的一个页面地址。
3.3、通过 window.postMessage 跨域
HTML5 为了解决这个问题,引入了一个全新的 API:跨文档通信 API(Cross-document messaging)。这个 API 为 window 对象新增了一个 window.postMessage 方法,允许跨窗口通信,不论这两个窗口是否同源。postMessage 的兼容性如下:
![前端跨域问题及解决方案](http://fs.qqfile.top/re/aHR0cHM6Ly9waWNzNC5iYWlkdS5jb20vZmVlZC81ZmRmOGRiMWNiMTM0OTU0MDEwYjJhZjNhNTQ0M2M1M2QxMDk0YTIyLnBuZ0BmX2F1dG8_dG9rZW49MWU2OTUxZmM3NDg0MzVhY2U5ZDI1OTU2NmEwNzZiYWM1)
可以看到 Internet Explorer 8 , chrome,Firefox , Opera 和 Safari 都将支持这个功能。但是 Internet Explorer 8 和 9 以及 Firefox 6.0 和更低版本仅支持字符串作为 postMessage 的消息。
var popup = window.open("http://bbb.com", "title");//父窗口http://aaa.com向子窗口http://bbb.com发消息,调用postMessage方法。popup.postMessage("Hello World!", "http://bbb.com");
postMessage 方法的第一个参数是具体的信息内容,第二个参数是接收消息的窗口的源(origin),即 协议 域名 端口。也可以设为 *,表示不限制域名,向所有窗口发送。
父窗口和子窗口都可以通过 message 事件,监听对方的消息。message 事件的事件对象 event,提供以下三个属性:
1、event.source:发送消息的窗口。 2、event.origin: 消息发向的网址。 3、event.data:消息内容。
一个例子:
var onmessage = function (event) { var data = event.data;//消息 var origin = event.origin;//消息来源地址 var source = event.source;//源Window对象 if(origin == "http://www.aaa.com"){ console.log(data);//hello world! } source.postMessage("Nice to see you!", "*"); }; if (typeof window.addEventListener != "undefined") { window.addEventListener("message", onmessage, false); } else if (typeof window.attachEvent != "undefined") { //ie window.attachEvent("onmessage", onmessage); }
本站仅为学习交流之用,所有视频和图片均来自互联网收集而来,版权归原创者所有,本网站只提供web页面服务,并不提供资源存储,也不参与录制、上传
若本站收录的节目无意侵犯了贵司版权,请发邮件(我们会在3个工作日内删除侵权内容,谢谢。)
www.fs94.org-飞速影视 粤ICP备74369512号