H5-postMessage使用

1.不跨域

// parent.html
<iframe src="http://www.duba.com/son2.html" id="son2" style="display:none"></iframe>
<script>
    function concat() {
        console.log('----parent-post-to-son2');
        var iframe = document.getElementById("son2").contentWindow;
        iframe.postMessage('test', 'http://www.duba.com');
    }
    setTimeout(() => {
        concat();
    }, 1000);
    
    window.addEventListener("message", function(event) {        
        console.log('---parent-message:' + event.data);  
        console.log('---parent-url:' + location.href);  
    }, false);
</script>

// son2.html
<script>
 window.addEventListener("message", function( event ) {
    console.log('---son2-message:' + event.data);
    console.log('---son2-url:' + location.href);
}, false);
</script>

结果如下
—parent-message:
—parent-url:http://www.duba.com/parent.html
—-parent-post-to-son2
—son2-message:test
—son2-url:http://www.duba.com/son2.html

2.跨域改造:

// parent.html
<iframe src="http://www.test2.com/son2.html" id="son2" style="display:none"></iframe>
<script>
    function concat() {
        console.log('----parent-post-to-son2');
        var iframe = document.getElementById("son2").contentWindow;
        iframe.postMessage('test', 'http://www.test2.com');
    }
    setTimeout(() => {
        concat();
    }, 1000);
    
    window.addEventListener("message", function(event) {        
        console.log('---parent-message:' + event.data);  
        console.log('---parent-url:' + location.href);  
    }, false);
</script>

// son2.html
<script>
 window.addEventListener("message", function( event ) {
    console.log('---son2-message:' + event.data);
    console.log('---son2-url:' + location.href);
}, false);
</script>

结果如下
—parent-message:
—parent-url:http://www.duba.com/parent.html
—parent-post-to-son2
—son2-message:test
—son2-url:http://www.test2.com/son2.html

为什么要指定targetorigin呢，既然指定了向某个窗口发送消息，不指定targetorigin是否可以呢？继续改造
3.targetorigin的作用

// parent.html
<iframe src="http://www.test.com/son2.html" id="son2" style="display:none"></iframe>
<script>
    function concat() {
        console.log('----parent-post-to-son2');
        var iframe = document.getElementById("son2").contentWindow;
        iframe.postMessage('test', 'http://www.test.com');
    }
    setTimeout(() => {
        concat();
    }, 1000);
    
    window.addEventListener("message", function(event) {        
        console.log('---parent-message:' + event.data);  
        console.log('---parent-url:' + location.href);  
    }, false);
</script>

// son2.html
<script>
 window.addEventListener("message", function( event ) {
    console.log('---son2-message:' + event.data);
    console.log('---son2-url:' + location.href);
}, false);
</script>

配置如下：
http://www.test.com/son2.html 301到http://www.test2.com/son2.html
结果如下：
—parent-message:
—parent-url:http://www.duba.com/parent.html
—parent-post-to-son2
可以看到son2页面未收到消息，为什么向指定窗口发送消息没收到呢？就是因为targetorigin的作用啦。监听message的页面的origin与targetorigin不同，继续改造

// parent.html
<iframe src="http://www.test.com/son2.html" id="son2" style="display:none"></iframe>
<script>
    function concat() {
        console.log('----parent-post-to-son2');
        var iframe = document.getElementById("son2").contentWindow;
        iframe.postMessage('test', 'http://www.test2.com');
    }
    setTimeout(() => {
        concat();
    }, 1000);
    
    window.addEventListener("message", function(event) {        
        console.log('---parent-message:' + event.data);  
        console.log('---parent-url:' + location.href);  
    }, false);
</script>

// son2.html
<script>
 window.addEventListener("message", function( event ) {
    console.log('---son2-message:' + event.data);
    console.log('---son2-url:' + location.href);
}, false);
</script>

配置如下：
http://www.test.com/son2.html 301到http://www.test2.com/son2.html
结果如下：
—parent-message:
—parent-url:http://www.duba.com/parent.html
—parent-post-to-son2
—son2-message:test
—son2-url:http://www.test2.com/son2.html
可以看到son2成功收到消息。所以发送消息指向的是窗口，而targetorigin指向监听message页面的origin