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

最新推荐文章于 2020-10-14 15:00:55 发布

weixin_30553777

最新推荐文章于 2020-10-14 15:00:55 发布

阅读量578

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/SunShineM/p/7832517.html

版权

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

　　报错：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

weixin_30553777

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
iframe嵌入页面自适应目标页面的高度

不要把页面放到本地，不然会报错，并且实现不了自适应高度的功能，　　报错：Blocked a frame with origin "null" from accessing a cross-origin frame；原因：跨页面操作涉及域的概念（origin），错误的意思是：未捕获的安全错误：阻止了一个域为null的frame页面访问另一个域为null的页面。代码运行时在本地直接用浏览器打开...
复制链接

扫一扫