javascript – html5消息传递多个实例

我有这样的脚本

function resizeCrossDomainIframe(id,other_domain) {
    var iframe = document.getElementById(id);
    window.addEventListener('message',function (event) {
        if (event.origin !== other_domain) return; // only accept messages from the specified domain
        if (event.data === "reload") top.location.reload(); // If child page sends reload request - reload it without any questions asked 
        if (isNaN(event.data)) { //If this isn't integer than it is alert
            alert(event.data); // Show alert if not integer
        } else {
            var height = parseInt(event.data) + 5; // add some extra height to avoid scrollbar
            iframe.height = height + "px";
            alert(event.data);
        }
    },false);
}

它的作用是动态调整iframe大小.现在在第一个iframe页面上,我只需要一个提醒,但在iframe页面中,我有链接,当我进入第二页时,我看到2个警报,当我去第三页 – 我得到3个警报,第4个链接触发4个警报等…

在每个iframed页面中,我调用parent来调整大小：

<body class="settingspage" onload="parent.postMessage(document.body.scrollHeight,'<?PHP echo $_SESSION['SESS_ACCESSING_FROM']; ?>');">

我尝试清除“事件”数组,但我仍然收到警报,但这次它们是空的,但是警报数量等于iframe中的链接点击次数？

为什么是这样？

解决方法

问题是,每次单击iframe中的链接时,会触发加载事件.

所以你每次点击链接时绑定你的消息事件.
第一次一切都是正确的,因为你绑定一次,第二次你收到两个警报,因为你绑定了两次,等等…

所以解决方案是删除卸载iframe的’message’事件.

因此,您必须清理代码：

var listener = function (event) {
 
    if (event.data === "reload") top.location.reload(); // If child page sends reload request - reload it without any questions asked 
    if (isNaN(event.data)) { //If this isn't integer than it is alert
        alert(event.data); // Show alert if not integer
    } else {
        var height = parseInt(event.data) + 5; // add some extra height to avoid scrollbar
        iframe.height = height + "px";
        alert(event.data);
    }
};

那么你有你的功能,你调用onLoad和onUnload.

function iframeOnLoad(id) {
    var iframe = document.getElementById(id);
    window.addEventListener('message',listener,false); 
}
 
function iframeOnUnload(id) {
    var iframe = document.getElementById(id);
    window.removeEventListener('message',false); 
}

javascript – html5消息传递多个实例

解决方法

猜你在找的JavaScript相关文章