iframe 跨域传值

react

父域部分
export default class ParentComponent extends React.Component {
    componentDidMount() {
        window.onmessage = e => {
//监听message事件
            if (e.data === 'login') {
                //根据子域传送来的数据 执行指定操作，传送来的数据在data中
            }
        };
    }
    sendToken = () => {
//必须是iframe加载完成后才可以向子域发送数据
        const childFrameObj = document.getElementById('calculation');
        childFrameObj.contentWindow.postMessage('要发送的数据，必须是字符串', '*');
    };
    render() {
        return (
            <div >
                    <iframe
                            id="calculation"
                            src=“”
                            onLoad={this.sendToken}
                        />
            </div>
        );
    }
}

 

react接收

子域部分
window.parent.postMessage('需要传送的数据，必须是字符串', '*'); //向父域传送数据

export default class ChildComponent extends React.Component {
    componentDidMount() {
       // 首次打开时需要监听message事件，接收父域传送来的数据
      //以我的项目里接收token举例
        if (sessionStorage.token) {
            //若子域内已存在token则不再需要监听message事件
           //do something
            window.onmessage = null;
            return;
        }
      //若token不存在
        window.onmessage = e => {
            if (e.data) {
                sessionStorage.token = e.data;
                //do something
            }
        };
    render() {
        return (
            <div >
                    xxxxxx
            </div>
        );
    }
}

 

html接收

 window.onload=function(){
        addEventListener('message',  (e) => {
            console.log('接收的message:',e.data);
        });
       
    }

 

 

 

 

html 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>

 

 

 

文章参考：

https://www.cnblogs.com/lianjq/p/7264166.html

 

https://www.jianshu.com/p/b01d7951a059

 

 

其他资料：

https://blog.csdn.net/momDIY/article/details/101290144

posted @ 2020-08-01 11:25  huihui2014  阅读(132)  评论(0)    收藏  举报