Vue中,iframe中的子网页,调用父网页的方法2
这里有我原来写的文章:Vue中,iframe中的子网页,调用父网页的方法,这里面写了, 父子页面的调用。但是今天写的时候,遇到了下面的报错;
-
Uncaught DOMException: Blocked a frame with origin "http://192.168.1.190:5500" from accessing a cross-origin frame.
阻止一个源为“http://192.168.1.190:5500”的帧访问一个跨源帧。
-
at btn.onclick
在btn.onclick
大致的问题就是这样的了。然后这个问题,就是被嵌套的子页面和父页面不是同源的,造成了不能使用上次的方法直接访问。但是也是有解决办法的;
在window中有一个全局的方法,就是为了解决这个问题的。叫做postMessage,他的解释在这里。下面直接说一下他的用法。在父页面,直接使用postMessage传递给子页面,
1 window.onload = function () { 2 var iframeId = document.getElementById("iframeIdOther"); 3 // console.log(iframeId.contentWindow) 4 var btn = document.getElementById("btn") 5 btn.onclick = function(){ 6 // iframeId.contentWindow.emptyClick(); // 这种是只有同源策略才能使用的 7 iframeId.contentWindow.postMessage("hahhahaha", '*'); // 第一个参数,可以是字符串对象等 8 } 9 }
然后在子页面,接受这个转递值就可以了;
1 window.addEventListener ('message', function(event) { 2 //event.data获取传过来的数据 3 console.log(event) 4 that.emptyClick(); 5 });
我的子页面是在Vue环境,所以需要写在mounted函数中。然后我截个图,就是传递过来的这个event打印的值;
最后还是需要说明一个问题,就是这里的传值,还是需要你有父页面和子页面的修改和操作的权限。如果没有的话,是没有办法改的;