父页面如何输出iframe里面的变量，或者调用iframe里面的方法？

2024年3月29日 128次阅读 来源: Carl 
// 父页面中
// html 
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

<iframe id="UniSoftPhone" src="http://localhost:8080/" width="100%" height="400px"></iframe>

</body>
</html>

// js
// UniSoftPhone是子页面iframe的Id
var frame = document.getElementById('UniSoftPhone'); 
var message = {method:'getCallMemory'};
frame.contentWindow.postMessage(JSON.stringify(message),'*')
// 子页面监听message事件
// listen message
    window.addEventListener('message', function(event){
        console.log(event);
        var data = event.data;

        try{
            data = JSON.parse(data);
            handlePostMessage.deliverMessage(data);
        }
        catch(e){
            util.error(e);
            util.error('message must be a stringify object!!');
        }
    });

// *** handler post message
    var handlePostMessage = {
        deliverMessage: function(message){
            var method = message.method;
            if($.isFunction(this[method]) && method !== 'deliverMessage'){
                this[method](message);
            }
        },
        getCallMemory: function(message){
            util.logCallMemory();
        },
        makeCall: function(message){
            var phoneNumber = message.phoneNumber;
            wellClient.makeCall(phoneNumber);
        }
    };
    原文作者：Carl
    原文地址: https://segmentfault.com/a/1190000009360359
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞