У меня есть проблема, из-за которой я пытаюсь отправить исходную высоту iframe родителю с помощью события onload.
Я делаю это с 1 родительской страницей и 2 страницами iframe (в качестве примера):
index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Parent Window</title>
</head>
<body>
<iframe id="iframe" src="iframe.html"></iframe>
<script>
// addEventListener support for IE8
function bindEvent(element, eventName, eventHandler) {
if (element.addEventListener){
element.addEventListener(eventName, eventHandler, false);
} else if (element.attachEvent) {
element.attachEvent('on' + eventName, eventHandler);
}
}
// Listen to message from child window
bindEvent(window, 'message', function (e) {
console.log(e.data);
var newHeight = e.data;
changeHeight(newHeight);
});
function changeHeight(newHeight) {
var iframe = document.getElementById('iframe');
//iframe.style.width = 950 + 'px';
iframe.style.height = newHeight + 'px';
}
</script>
</body>
</html>
, который при запуске загружает следующую страницу:
iframe.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>iframe Window</title>
<style>
body {
background-color: #D53C2F;
color: white;
}
</style>
</head>
<body onload="iframeResizeFunc()">
<h1><a href="iframe2.html">Hi.!!!</a></h1>
<h1>Hi.!!!</h1>
<h1>Hi.!!!</h1>
<h1>Hi.!!!</h1>
<h1>Hi.!!!</h1>
<h1>Hi.!!!</h1>
<h1>Hi.!!!</h1>
<h1>Hi.!!!</h1>
<h1>Hi.!!!</h1>
<h1>Hi.!!!</h1>
<h1>Hi.!!!</h1>
<h1>Hi.!!!</h1>
<h1>Hi.!!!</h1>
<h1>Hi.!!!</h1>
<h1>Hi.!!!</h1>
<h1>Hi.!!!</h1>
<h1>Hi.!!!</h1>
<script>
function iframeResizeFunc() {
var body = document.body,
html = document.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight );
//console.log(height);
function bindEvent(element, eventName, eventHandler) {
if (element.addEventListener) {
element.addEventListener(eventName, eventHandler, false);
} else if (element.attachEvent) {
element.attachEvent('on' + eventName, eventHandler);
}
}
var sendMessage = function (msg) {
// Make sure you are sending a string, and to stringify JSON
window.parent.postMessage(msg, '*');
};
sendMessage('' + height);
}
</script>
</body>
</html>
Поэтому, когда эта страница загружается, в консоли она отображает высоту iframe, например, iframe.html: 45 1033.
Однако, когда вы нажимаете гиперссылку на первом 'h1', и он загружает следующую страницу, он по-прежнему отображается в консоли 1033 как высота, хотя он должен быть примерно вдвое меньше.Нужно ли как-то очистить значение?
iframe2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>iframe Window</title>
<style>
body {
background-color: #D53C2F;
color: white;
}
</style>
</head>
<body onload="iframeResizeFunc()">
<h1>Hi.!!!</h1>
<h1>Hi.!!!</h1>
<h1>Hi.!!!</h1>
<h1>Hi.!!!</h1>
<h1>Hi.!!!</h1>
<h1>Hi.!!!</h1>
<script>
function iframeResizeFunc() {
var body = document.body,
html = document.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight );
//console.log(height);
function bindEvent(element, eventName, eventHandler) {
if (element.addEventListener) {
element.addEventListener(eventName, eventHandler, false);
} else if (element.attachEvent) {
element.attachEvent('on' + eventName, eventHandler);
}
}
var sendMessage = function (msg) {
// Make sure you are sending a string, and to stringify JSON
window.parent.postMessage(msg, '*');
};
sendMessage('frame2: ' + height);
}
</script>
</body>
</html>