iframe传值通信

失眠时间

已于 2023-07-05 17:43:17 修改

阅读量153

点赞数

文章标签： javascript 前端开发语言

于 2023-07-05 17:40:59 首次发布

本文链接：https://blog.csdn.net/weiCong_Ling/article/details/131560682

版权

该文章展示了一个HTML示例，说明如何使用postMessage方法在父页面和嵌入的iframe子页面之间进行通信。当点击按钮时，父组件向子组件发送数据，反之亦然，通过监听message事件来接收对方的消息。

摘要由CSDN通过智能技术生成

父级

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="">
        <iframe id="iframe" src="http://xxx/child.html" frameborder="0"></iframe>
        <button type="button" id="btn">给子组件传值</button>

    </div>

</body>
<script type="text/javascript">
    let btn = document.getElementById('btn');
    let iframe = document.getElementById('iframe');
    btn.onclick = () => {
        // 第一个参数 如果是对象数据，需要 JSON.stringify({})
        // 第二个参数 其值可以是字符串 “*” 表示无限制，或者是一个URI。
        iframe.contentWindow.postMessage("父组件给子组件的数据", 'http://xxx/child.html')
    }
    window.addEventListener('message', function (event) {
        console.log('event_father', event);
    }, false);
    // window.onmessage = function(event) {
    //     console.log('event_father', event);
    // }
</script>

</html>

子级

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="">
        <button type="button" id="btn">给父组件传值</button>
    </div>

</body>
<script type="text/javascript">
    let btn = document.getElementById('btn');
    btn.onclick = () => {
        // 第一个参数 如果是对象数据，需要 JSON.stringify({})
        // 第二个参数 其值可以是字符串 “*” 表示无限制，或者是一个URI。
        top.postMessage("子组件给父组件的数据", 'http://xxx/father.html')
    }
    window.addEventListener('message', function (event) {
        console.log('event_child', event);

    }, false);
</script>

</html>