iframe嵌入页面自适应目标页面的高度

不要把页面放到本地,不然会报错,并且实现不了自适应高度的功能,

  报错:Blocked a frame with origin "null" from accessing a cross-origin frame;

原因:跨页面操作涉及域的概念(origin),错误的意思是:未捕获的安全错误:阻止了一个域为null的frame页面访问另一个域为null的页面。代码运行时在本地直接用浏览器打开的,地址栏是file:///的页面,只需改为localhost访问就行。

第一种:(在引入iframe的页面加上)

            function setIframeHeight(iframe) {
                if (iframe) {
                    var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
                    if (iframeWin.document.body) {
                        iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
                    }
                }
            };
                
            window.onload = function () {
                setIframeHeight(document.getElementById('iframe'));
            };

第二种:

在引入iframe的页面加上:

                $("#iframe").load(function(){
                    var mainheight = $(this).contents().find("body").height()+30;
                    $(this).height(mainheight);
                });

在子页面加上:

        $(window.parent.document).find("#iframe").load(function(){
            var main = $(window.parent.document).find("#iframe");
            var thisheight = $(document).height()+30;
            main.height(thisheight);
        });

例子:

<html lang="sv"><head>
        <meta charset="utf-8">
        <title>Iframe height demo</title>
        <script src="jquery.js"></script>
        <style media="screen,print">
        #body {
            width:70em;
            max-width:100%;
            margin:0 auto;
        }
        iframe {
            width:100%;
            margin:0 0 1em;
            border:0;
        }
        </style>
        <script>
            function setIframeHeight(iframe) {
                if (iframe) {
                    var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
                    if (iframeWin.document.body) {
                        iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
                    }
                }
            };
                
            window.onload = function () {
                setIframeHeight(document.getElementById('iframe'));
            };
        </script>
    </head>
    <body>
        <div id="body">
            <h1>Iframe height demo</h1>
            <h2><code>iframe</code> <strong>without</strong> height adjustment</h2>
            <iframe src="child.html"></iframe>
            <h2><code>iframe</code> <strong>with</strong> height adjustment</h2>
            <iframe src="child.html" frameborder="0" id="iframe"></iframe>
            <div id="labfooter">
    </div>
        </div>
        
    </body>
    </html>
原文地址:https://www.cnblogs.com/SunShineM/p/7832517.html