如何实现网页和iframe之间的通讯?

最新推荐文章于 2024-04-28 19:21:12 发布

unbreakablec

最新推荐文章于 2024-04-28 19:21:12 发布

阅读量205

点赞数

分类专栏：面试文章标签：前端

本文链接：https://blog.csdn.net/unbreakablec/article/details/132463282

版权

面试专栏收录该内容

3 篇文章 0 订阅

订阅专栏

答案：

1. 使用 postMessage 通讯

2. 注意跨域的限制和判断

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
</head>
<body>
    <p>
        index page
        <button id="btn1">发送消息</button>
    </p>

    <iframe id="iframe1" src="./child.html"></iframe>

    <script>
        const btn1 = document.getElementById('btn1')
        btn1.addEventListener('click', () => {
            console.info('index clicked')
            // 发送信息 使用 postMessage
            window.iframe1.contentWindow.postMessage('hello', '*') // postMessage 的第一个参数是发什么信息，第二个参数是域名，就是说有没有域名限制，写个*就是说没有限制
        })

        // 接收信息 使用 message
        window.addEventListener('message', event => {
            console.info('origin', event.origin) // 来源的域名
            console.info('index received', event.data)
        })

        // 如何实现网页和iframe之间的通讯
        // 答案：使用 postMessage 通讯; 注意跨域的限制和判断
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>child</title>
</head>
<body>
    <p>
        child page
        <button id="btn1">发送消息</button>
    </p>

    <script>
        const btn1 = document.getElementById('btn1')
        btn1.addEventListener('click', () => {
            console.info('child clicked')
            // 被嵌入的 iframe 往父页面 发送信息
            window.parent.postMessage('world', '*') // postMessage 的第一个参数是发什么信息，第二个参数是域名，就是说有没有域名限制，写个*就是说没有限制
        })

        // 接收信息
        window.addEventListener('message', event => {
            console.info('origin', event.origin) // 判断 origin 的合法性
            console.info('child received', event.data)
        })
    </script>
    <!-- 在本地启动简易 Http 服务器: 在需要监听的文件夹打开命令行，输入命令：npx http-server -p 8888  即可在 8888 端口启动 Http 服务 -->
</body>
</html>