HTML5消息多實例

我有這樣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網頁上：

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

我試圖清除「事件」數組，但我仍然得到通知，但這次他們是空的，但警報的數量等於iframe中鏈接點擊的數量？

這是爲什麼？

來源

2013-02-07 Peter

時/你在哪裏調用'resizeCrossDomainIframe（）'？ – FoolishSeth

@FoolishSeth函數本身位於其他域（我可以訪問這兩個域），但由於它是跨域消息傳遞 - 我在加載時在每個「iframe」主體上調用它。所以在第一次「幀加載」時，它會正確顯示所有內容，但當用戶點擊iframe中的鏈接時，每次點擊都會得到相同數量的警報（1個鏈接點擊iframe = 1個警報，2個點擊= 2個警報，15個點擊= 15警報等）。 – Peter

問題是，每次點擊iframe中的鏈接時，都會觸發加載事件。

因此，每次單擊鏈接時都會綁定您的消息事件。第一次一切都是正確的，因爲你綁定了一次，第二次你得到兩個警報，因爲你綁定了兩次，等等......

所以解決的辦法是刪除'message'event在卸載的iframe。

出於這個原因，你必須清理你的代碼位：

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', listener, false); 
}

來源

2013-02-13 08:18:57 Sam

我解決了這個移動功能「主頁的身體負荷」，並從IFRAME刪除它...

來源

2013-02-15 15:37:37 Peter

HTML5消息多實例

回答

相關問題