Html5 обмен сообщениями с несколькими экземплярами

i имеет script как этот

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']; ?>');">

Я попытался очистить массив "event", но я все равно получаю предупреждения, но на этот раз они пустые, но количество предупреждений равно числу кликов ссылок в iframe?

Почему это?

Ответ 1

Проблема заключается в том, что каждый раз, когда вы нажимаете на ссылку в 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); 
}

Ответ 2

Я решил это, переместив функцию на "главную страницу тела при загрузке" и удалив ее из iframe...