javascript - 更改title - 如何自动调整iFrame的大小?




js修改页面title (8)

可能重复:
根据内容调整iframe大小

我正在加载iFrame并希望父级根据iFrame内容的高度自动更改高度。

简而言之,所有页面都属于同一个域,因此我不应该遇到跨站点脚本问题。


Oli有一个适合我的解决方案。 为了记录,我的iFrame中的页面是由javascript呈现的,所以在报告offsetHeight之前我需要一个无穷小的延迟。 它看起来像这样的东西:


    $(document).ready(function(){
        setTimeout(setHeight);
    });

    function setHeight() {
        alert(document['body'].offsetHeight);   
    }

在IE 5.5+中,您可以使用contentWindow属性:

iframe.height = iframe.contentWindow.document.scrollHeight;

在Netscape 6中(假设也是firefox),contentDocument属性:

iframe.height = iframe.contentDocument.scrollHeight


我发现@ShripadK的解决方案最有帮助,但是如果有多个iframe则不起作用。 我的修复是:

function autoResizeIFrame() {
  $('iframe').height(
    function() {
      return $(this).contents().find('body').height() + 20;
    }
  )
}

$('iframe').contents().find('body').css(
  {"min-height": "100", "overflow" : "hidden"});

setTimeout(autoResizeIFrame, 2000);
setTimeout(autoResizeIFrame, 10000);
  • $('iframe').height($('iframe').contents().find('body').height() + 20)将每帧的高度设置为相同的值,即高度第一帧的内容。 所以我使用jquery的height()函数而不是值。 这样就可以计算出各个高度
  • + 20是解决iframe滚动条问题的黑客攻击。 该数字必须大于滚动条的大小。 可以避免黑客攻击,但禁用iframe的滚动条。
  • 我使用setTimeout而不是setInterval(..., 1)来减少我的情况下的CPU负载

我的解决方法是将iframe的高度/宽度设置为高于CSS中任何预期的源页面大小,将background属性设置为transparent

在iframe中, allow-transparencytruescrollingno

唯一可见的是您使用的任何源文件。 它适用于IE8,Firefox 3和Safari。


我碰巧遇到了你的问题,我有一个解决方案。 但它在jquery。 它太简单了。

$('iframe').contents().find('body').css({"min-height": "100", "overflow" : "hidden"});
setInterval( "$('iframe').height($('iframe').contents().find('body').height() + 20)", 1 );

你去!

干杯! :)

编辑:如果你有一个基于iframe方法而不是div方法的富文本编辑器,并希望它扩展每一个新行,那么这段代码将完成所需。


这是一个死的简单解决方案,适用于每个浏览器和跨域:

首先,这适用于如下概念:如果包含iframe的html页面设置为100%的高度并且使用css将iframe设置为100%的高度,则css将自动调整所有内容的大小。

代码如下:

<head>
<style type="text/css"> 
html {height:100%}
body {
margin:0;
height:100%;
overflow:hidden
}
</style>
</head>

<body>
<iframe allowtransparency=true frameborder=0 id=rf sandbox="allow-same-origin allow-forms allow-scripts" scrolling=auto src="http://www.externaldomain.com/" style="width:100%;height:100%"></iframe>
</body>

这是我使用原型找到的最简单的方法:

main.html中:

<html>
<head>


<script src="prototype.js"></script>

<script>
    function init() {
        var iframe = $(document.getElementById("iframe"));
        var iframe_content = $(iframe.contentWindow.document.getElementById("iframe_content"));
        var cy = iframe_content.getDimensions().height;
        iframe.style.height = cy + "px";
    }
</script>

</head>

<body onload="init()">


<iframe src="./content.html" id="iframe" frameBorder="0" scroll="no"></iframe>

<br>
this is the next line

</body>
</html>

content.html:

<html>
<head>
<script src="prototype.js"></script>


<style>
body {
    margin: 0px;
    padding: 0px;
}
</style>


</head>

<body>


<div id="iframe_content" style="max-height:200px;">
Sub content<br>
Sub content<br>
...
...
...
</div>


</body>
</html>

这似乎在所有主流浏览器中都有效(到目前为止)。







autosize