关闭

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

标签: 虚拟主机跨域postMessag
447人阅读 评论(0) 收藏 举报
分类:
问题描述:
本地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

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:108603次
    • 积分:2753
    • 等级:
    • 排名:第13121名
    • 原创:175篇
    • 转载:0篇
    • 译文:0篇
    • 评论:8条