Iframe跨窗口通信原理详解

什么是Iframe?

Iframe又被称为内嵌框架，是一种可以将另一个HTML文档嵌入到当前HTML文档的标记。它可以将不同的网页嵌到同一个网页上，使得网页具有嵌套性。

Iframe的跨窗口通信原理

Iframe内部的网页区域和外部的网页区域是完全隔离的，就算是运行在同一个主域名下，它们之间也无法直接通讯。对此，Iframe提供了两种通讯方式：postMessage和window.name

postMessage

// 在父级网页中给Iframe子网页发送一个小序列
var targetOrigin = "http://www.child.com";
var data = {title:"postMessage", message:"Hello, world!"};
window.frames[0].postMessage(data, targetOrigin);

// 在子级网页中接收来自父亲网页的消息
window.onmessage = function(e){
    if (e.origin === "http://www.father.com"){
        console.log(e);
        var data = e.data;
        console.log(data.title);
        console.log(data.message);
    }
}

window.name

// 在父级网页中获取子级网页的数据
var win = window.open("http://www.child.com");
console.log(win); // 输出 Window /_<random-number>

setTimeout(function(){
    console.log(win.name); // 输出子级窗口数据
    win.name = "I'm father!";
}, 2000);

// 在子级网页中获取数据
console.log(window.name); // 输出空字符串
setTimeout(function(){
    window.name = "Hello, child!";
}, 2000);

// 在父级网页中获取子级网页的数据
setTimeout(function(){
    console.log(win.name); // 输出子级网页数据
    win.close(); //关闭子级窗口
}, 4000);

以上是通过window.post方法和window.name属性在Iframe子级网页和父亲网页间的通信。

示例

下面是一个用Iframe实现的简单的购物车示例。我们在主网页中嵌入Iframe，Iframe中的内容是一个商品详情页和加入购物车功能。当用户点击商品详情页中的“加入购物车”按钮时，Iframe中的加入购物车功能会将商品信息传递给主网页，主网页再将商品信息展示在购物车中。

<!-- 父级网页 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>购物车示例</title>
</head>
<body>
    <h1>商品列表</h1>
    <ul>
        <li>
            <h3>商品1</h3>
            <p>价格：10元</p>
            <iframe src="product.html"></iframe>
        </li>
        <li>
            <h3>商品2</h3>
            <p>价格：20元</p>
            <iframe src="product.html"></iframe>
        </li>
        <li>
            <h3>商品3</h3>
            <p>价格：30元</p>
            <iframe src="product.html"></iframe>
        </li>
    </ul>
    <div id="cart">
        <h2>购物车</h2>
        <ul id="cart-list"></ul>
    </div>
    <script>
        window.addEventListener('message', function(e){
            if(e.origin === 'http://localhost:3000'){
                var data = e.data;
                var li = document.createElement('li');
                li.textContent = data.title + "：价格 " + data.price + " 元";
                document.getElementById('cart-list').appendChild(li);
            }
        });
    </script>
</body>
</html>

<!-- 子级网页 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>商品详情页</title>
</head>
<body>
    <h2>商品详情</h2>
    <p>商品的详细信息</p>
    <button onclick="addToCart()">加入购物车</button>
    <script>
        function addToCart(){
            var data = {
                title: "商品1",
                price: 10
            };
            window.parent.postMessage(data, 'http://localhost:3000');
        }
    </script>
</body>
</html>

在这个示例中，主网页通过Iframe加载商品详情网页，当用户点击商品详情页的“加入购物车”按钮时，子级网页通过postMessage方法将商品信息传递给主网页，主网页接收到消息后将商品信息展示在购物车中。