iframe跨域数据传递

最新推荐文章于 2023-09-11 19:31:46 发布

CARL6789

最新推荐文章于 2023-09-11 19:31:46 发布

阅读量206

点赞数

文章标签： json

原文链接：http://www.cnblogs.com/lianjq/p/7264166.html

版权

项目中需要和其他单位合作开发，方案采用iframe嵌入页面，开发过程中设计到了跨域数据的传递，初步方案决定使用html5 API postMessage进行iframe跨域数据传递；
域名A下的页面

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'/>
    <title>Page_1</title>
</head>
<body style="background: palegoldenrod;">
<div style="width:100%;height:100px;">这是父页面</div>
<div id="cont_father"></div>
<iframe id="page_1" src="http://192.168.100.40:4200/page2/index.html" width="100%"  style="padding:0px; min-height:580px;"></iframe>
<div id="btn_father" style="border:1px solid #999;padding: 10px 50px;display: inline-block;cursor:pointer">打开console，点击后向子页面发送数据</div>
<script>
    window.onload=function () {
        var btn_father=document.getElementById('btn_father');
        var cont_father=document.getElementById('cont_father');
        var sendData={
            text:'这是父页面的数据'
        }
        
        bind(btn_father,'click',function () {
            window.frames[0].postMessage(JSON.stringify(sendData),'http://192.168.100.40:4200/page2/index.html');//数据发送
        })
        
        bind(window,'message',function(e) {
            var e=window.event || arguments[0];
            var data = JSON.parse(e.data);
            console.log('我是父页面，这是子页面发送的数据：'+data);
            console.log(data.text)
            cont_father.innerHTML=data.text;
            console.log('-------------------')
        })
        function bind(obj, evname, fn) {
            if (obj.addEventListener) {
                obj.addEventListener(evname, fn, false);
            } else {
                obj.attachEvent("on" + evname, function () {
                    fn.call(obj);
                })
            }
        }
    }
</script>
</body>
</html>

域名B下的页面

<!doctype html>
<html>
<head>
    <title>Page_2</title>
    <meta charset="utf-8">
</head>
<body style="background: #fff">
<h3>这是子页面</h3>
<div id="cont_child"></div>
<div id="btn_child" style="border:1px solid #eee;padding: 10px 50px;display: inline-block;cursor:pointer">打开控制台，并点击</div>

<script>

    window.onload=function(){

        var btn_child=document.getElementById("btn_child");
        var cont_child=document.getElementById("cont_child");
        var sendData={text:'我是iframe里面的数据'};
        
        bind(btn_child,'click',function(){
            window.parent.postMessage(JSON.stringify(sendData),'http://192.168.100.40:4100/page1/index.html');//数据发送
        })

        bind(window,'message',function(e) {
            var e=window.event || arguments[0];
            if(e.source!=window.parent) return;
            var data = JSON.parse(e.data);
            console.log('我是子页面，这是父页面发送的数据：'+data);
            console.log(data.text)
            cont_child.innerHTML=data.text;
            console.log('------------------')
        })

        function bind(obj, evname, fn) {
            if (obj.addEventListener) {
                obj.addEventListener(evname, fn, false);
            } else {
                obj.attachEvent("on" + evname, function () {
                    fn.call(obj);
                })
            }
        }
    }
</script>
</body>
</html>

经测试，可以兼容ie8

转载于:https://www.cnblogs.com/lianjq/p/7264166.html

CARL6789

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
iframe跨域数据传递

项目中需要和其他单位合作开发，方案采用iframe嵌入页面，开发过程中设计到了跨域数据的传递，初步方案决定使用html5 API postMessage进行iframe跨域数据传递；域名A下的页面<!DOCTYPE html><html><head> <meta charset='utf-8'/> <title...
复制链接

扫一扫