前端内嵌Iframe页面，同源非同源消息通信

最新推荐文章于 2024-05-29 11:41:45 发布

好帅的爸爸（）

最新推荐文章于 2024-05-29 11:41:45 发布

阅读量2k

点赞数 2

分类专栏： javascript 文章标签： html javascript

本文链接：https://blog.csdn.net/wangliuqi123/article/details/109577991

版权

参考文档地址：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage

原理基于postMessage。

demo例子：

parent.html

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <h1>父亲页面</h1>
        <button onclick="sendMeg()">发送数据</button>
        <iframe src="children.html" width="100%" height="200px" id="child"></iframe>
    </body>
    <script>
        function sendMeg(){
            var iframe = document.getElementById("child")
            iframe.contentWindow.postMessage('父页面传送的数据','*');
        }
        function callback(){
            console.log(回调)
        }
        // 监听传送到父页面的数据
        window.addEventListener('message',function(data){
            console.

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

好帅的爸爸（）

关注关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
前端内嵌Iframe页面，同源非同源消息通信

参考文档地址：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage原理基于postMessage。demo例子：parent.html<!DOCTYPE html><html> <head></head> <body> <h1>父亲页面</h1> <button oncl
复制链接

扫一扫