iframe页面传参,解决跨域

·  阅读 241
<!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://127.0.0.1:5500/page1.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>
复制代码
<!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://127.0.0.1:5500/page2.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 () {
            console.log(window,window.frames,'window.frames')
            window.frames[0].postMessage(JSON.stringify(sendData),'http://127.0.0.1:5500/page2.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>
复制代码
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改