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打印的值;

 

  最后还是需要说明一个问题,就是这里的传值,还是需要你有父页面和子页面的修改和操作的权限。如果没有的话,是没有办法改的;

 

posted @ 2022-06-28 17:43  程先生哈  阅读(783)  评论(0编辑  收藏  举报