Question

我遇到一个问题，试图通过onload事件将iframe的源高度发送给父级。

我使用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>

将值发送给父级（iFrame）

0 个答案: