父頁面如何輸出iframe裡面的變數,或者呼叫iframe裡面的方法?

wangduanduan發表於2017-05-10
// 父頁面中
// 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);
        }
    };

相關文章