Question

我想自动将iframe高度设置为iframe的内容高度，其中max-height为800 px。这意味着所有小于800像素的iframe都没有滚动条，所有大于800像素的iframe都是800像素高的滚动条。我已经尝试过了：

我不知道我做错了什么，我想它只是一条简单的线条，文件夹是：

style.css
index.html
Scripts/index.js
Sides/pictures.html
Pics/Picture.png

index.js中的图片，样式和其他功能正常运行。代码如下：

index.html的HTML：

<div id="pictures">
        <iframe src="Sides/pictures.html">
            Pictures
        </iframe>
    </div>

photos.html的HTML：

<h1><img src="../Pics/Pictures.png" width="32" height="32">Pictures</h1>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        Lorem i

iframe的CSS：

iframe {
        width: 65%;
        max-height:800px;
        margin: auto;
        display:block;
        border: 1px solid transparent;
        border-radius: 10px;
        background: rgba(0, 0, 0, 0.9);
        padding: 0 0 0 0.5em;
      }

index.js

// Auto height for all iframes
$("iframe").load(function() {
    // http://www.w3schools.com/jsref/dom_obj_frame.asp

           try {
              var body = $(this).contents().find('body');
              this.height = 1;
              this.height = body.attr('scrollHeight');
           } catch(e){}

    });

所以你可以看到我尝试了很多，我知道并非所有这些方法都有效，但我希望它们经过测试。而不是

$("iframe").load(function()

我也试过

$("iframe").each(function()

Answer 1

试试此代码

使用Javascript：

function autoResize(id){
    var newheight;
    var newwidth;
    if(document.getElementById){
        newheight=document.getElementById(id).contentWindow.document .body.scrollHeight;
        newwidth=document.getElementById(id).contentWindow.document .body.scrollWidth;
    }
    document.getElementById(id).height= (newheight) + "px";
    document.getElementById(id).width= (newwidth) + "px";
}

HTML：

<iframe id="iframe" onload="autoResize(this.id);" src="/your-iframe-src" ></iframe>

Answer 2

这是一个解决方案：

jQuery(function($) {
    $("iframe").on('load', function() {
        try {
            var body            = $(this).contents().find('body');
            var scrollHeight    = body.get(0).scrollHeight;

            console.log('scrollHeight', scrollHeight);
            $(this).css('height', scrollHeight);
        } catch(e){
            console.log(e);
        }
    });
});

WONT WORK LOCAL !!! （安全原因），演示：http://www.adi-code.de/stackoverflow/iframe/

iframe自动高度不起作用

2 个答案: