七种跨域方法【5.window.postMessage篇】

来源：互联网发布：师洋的淘宝店铺是编辑：程序博客网时间：2024/06/03 07:48

问题描述：本地http://localhost/data.html向异域http://www.lamport.me/data2.html获取数据如果该文件不能访问，你可以在自己的wamp中配置一个虚拟主机进行访问虚拟主机的配置地址：http://blog.csdn.net/super_yang_android/article/details/53991982

http://localhost/data.html代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>window.postMessage</title>    <script>        /*        * window.postMessage是html5中的方法        * */        window.onload = function () {            var oInput = document.getElementById('input1');            var oButton = document.getElementById('btn1');            oButton.onclick = function () {                var data = oInput.value;                window.frames[0].postMessage(data, '*');            }        }    </script></head><body><iframe src="http://www.lamport.me/data2.html" style="display:none" frameborder="0"></iframe><input type="text" id="input1" value="你好，地球，我来自黑暗星球"><button id="btn1">点击我通过iframe框架向http://www.lamport.me/data2.html页面发送并返回数据</button></body></html>

异域http://www.lamport.me/data2.html代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>window.postMessage</title>    <script>        window.onmessage = function(e) {            e = e || event;            alert('我接受到来自外太空的数据：' + e.data);        }    </script></head><body></body></html>

0 0