• 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>
  • 相关阅读:
    6.12白书第五章图论总结——司雨寒
    【司雨寒】最短路专题总结
    十三 十四周总结
    13周总结--苏康
    JuneX_13
    12总结--苏康
    十二周总结
    每周总结(5.30)——何贤拓
    进阶实验4-3.1 家谱处理 (30分)
    进阶实验2-3.1 海盗分赃 (25分)--递推
  • 原文地址:https://www.cnblogs.com/SunShineM/p/7832517.html
Copyright © 2020-2023  润新知