和内嵌的iframe进行通讯

Posted dlm17

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了和内嵌的iframe进行通讯相关的知识,希望对你有一定的参考价值。

利用内置iframe进行通讯

1. 在当前网页设置iframe网页(监听iframe发来postmessage消息事件)

a. 外部网页接收数据:

回调方法,其中e.data为传入数据:

const onmessage = (e: any) => { e.data };

If (typeof window.addEventListener !== ‘undefined’){

window.addEventListener(‘message’, onmessage , false);

} else if(typeof window.attachEvent !== ‘undefined’){

window.attachEvent(‘message’, onmessage );

}

b. 外部网页向内部iframe发数据:

window.frames.iframe元素id名.contentWindow.postMessage(数据, ‘*’)

2. Iframe设置的url去加载我们写的js文件内部写

内部iframe向外部网页发数据:window.parent.postMessage({data: ‘aa’}, ‘*’);

内部iframe接收数据同上

以上是关于和内嵌的iframe进行通讯的主要内容,如果未能解决你的问题,请参考以下文章

请问通过iframe内嵌的jsp在ie缓存里面找不到啊,如何才能看到这个jsp返回到客户的html呢

常见标签

iframe内嵌页面——跨域通讯

vue文件内嵌 HTML文件iframe用法

UnityWebGl与Vue通讯问题(及如何内嵌Webgl至Vue)

Iframe相关操作