七种跨域方法【5.window.postMessage篇】
问题描述:
本地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>
阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/super_yang_android/article/details/53992386
个人分类: 筑基【js】
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

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

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭