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

PetitQ HTML/CSS 2018-12-10 1.95K 0 0

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>
```

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

已有 488 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

HTML/CSS

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

第一种：

第二种：

例子：

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

相关文章

轻松解决 li 标签上边缘间隙问题

利用:hover伪类实现鼠标指向区块滑出小提示效果

手机网站实现左边弹出导航菜单点击一级分类展开二级分类

发表回复取消回复

热销模板

HTML/CSS

第一种：

第二种：

例子：

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

相关文章

发表回复 取消回复

热销模板

发表回复取消回复