Pet*_*ter 10 javascript iframe 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中的链接点击次数？
为什么是这样 ？
问题是，每次单击 iframe 中的链接时，都会触发 load 事件。
因此，每次单击链接时都会绑定消息事件。第一次一切都是正确的，因为您绑定了一次，第二次您收到两个警报，因为您绑定了两次，依此类推......
所以解决方案是在 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', listener, false);
}
| 归档时间： |
|
| 查看次数： |
298 次 |
| 最近记录： |