根据内容调整iframe的大小

我正在开发一个类似igoogle的应用程序。来自其他应用程序(在其他域中)的内容使用iframe显示。

我如何调整iframes的大小以适应iframes的内容的高度?

我试图破译的javascript谷歌使用，但它是模糊的，搜索网络至今一无所获。

更新:请注意，内容是从其他域加载的，因此适用同源策略。

当前回答

找不到能完美处理大文本+大图像的东西，但我最终得到了这个，似乎这是对的，或者几乎是对的，每一次:

    iframe.addEventListener("load",function(){
        // inlineSize, length, perspectiveOrigin, width
        let heightMax = 0;
        // this seems to work best with images...
        heightMax = Math.max(heightMax,iframe.contentWindow.getComputedStyle(iframe.contentWindow.document.body).perspectiveOrigin.split("px")[0]);
        // this seems to work best with text...
        heightMax = Math.max(heightMax,iframe.contentWindow.document.body.scrollHeight);
        // some large 1920x1080 images always gets a little bit off on firefox =/
        const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
        if(isFirefox && heightMax >= 900){
            // grrr..
            heightMax = heightMax + 100;
        }

        iframe.style.height = heightMax+"px";
        //console.log(heightMax);
    });

2021-02-13 23:31:26

其他回答

下面是一个jQuery方法，它通过iframe的src属性在json中添加信息。这是一个演示，调整大小和滚动这个窗口。使用json生成的url如下所示… http://fiddle.jshell.net/zippyskippy/RJN3G/show/ {scrollHeight windowHeight docHeight: 5124: 1019: 571} #

这里是源代码提琴http://jsfiddle.net/zippyskippy/RJN3G/

function updateLocation(){

    var loc = window.location.href;
    window.location.href = loc.replace(/#{.*}#/,"") 
        + "#{docHeight:"+$(document).height() 
        + ",windowHeight:"+$(window).height()
        + ",scrollHeight:"+$(window).scrollTop()
        +"}#";

};

//setInterval(updateLocation,500);

$(window).resize(updateLocation);
$(window).scroll(updateLocation);

2013-01-23 18:37:39

下面是一个简单的解决方案，使用与iframe内容相同的服务器提供的动态生成的样式表。很简单，样式表“知道”iframe中有什么，并且知道用于设置iframe样式的维度。这就绕过了同源策略限制。

http://www.8degrees.co.nz/2010/06/09/dynamically-resize-an-iframe-depending-on-its-content/

因此，所提供的iframe代码将有一个附带的样式表，像这样…

这要求服务器端逻辑能够计算iframe呈现内容的尺寸。

2010-06-09 03:10:32

David Bradshaw和Chris Jacob已经建议使用postMessage方法。我完全同意，做这些事情的正确方法。

我只是想发布一个例子，真实的代码，以防它对一些人来说是现成的答案。

在iframed面:

<body onload="docResizePipe()">
<script>
var v = 0;
const docResizeObserver = new ResizeObserver(() => {
    docResizePipe();
});
docResizeObserver.observe(document.querySelector("body"));
function docResizePipe() {
    v += 1;
    if (v > 5) {
        return;
    }
    var w = document.body.scrollWidth;
    var h = document.body.scrollHeight;
    window.parent.postMessage([w,h], "*");
}
setInterval(function() {
    v -= 1;
    if (v < 0) {
        v = 0;
    }
}, 300);
</script>

注意递归阻塞机制——这显然是必要的，因为Firefox中有一个bug，但不管怎样，让它存在吧。

在父文档端:

<iframe id="rpa-frame" src="3.html" style="border: none;"></iframe>
<script>
var rpaFrame = document.getElementById("rpa-frame");

window.addEventListener("message", (event) => {
    var width = event.data[0];
    var height = event.data[1];
    rpaFrame.width = parseInt(width)+60;
    rpaFrame.height = parseInt(height)+60;
    console.log(event);
}, false);
</script>

希望对大家有用。

2021-04-11 11:48:39

http://www.phinesolutions.com/use-jquery-to-adjust-the-iframe-height.html上的解决方案很好(使用jQuery):

<script type=”text/javascript”>
  $(document).ready(function() {
    var theFrame = $(”#iFrameToAdjust”, parent.document.body);
    theFrame.height($(document.body).height() + 30);
  });
</script>

我不知道你是否需要在长度上加上30…我为我工作过。

仅供参考:如果你已经在你的iFrame上有一个“height”属性，这只是添加了style="height: xxx"。这可能不是你想要的。

2008-10-30 14:07:20

使用jquery加载(跨浏览器):

 <iframe src="your_url" marginwidth="0"  marginheight="0" scrolling="No" frameborder="0"  hspace="0" vspace="0" id="containiframe" onload="loaderIframe();" height="100%"  width="100%"></iframe>

function loaderIframe(){
var heightIframe = $('#containiframe').contents().find('body').height();
$('#frame').css("height", heightFrame);
 }

在响应式页面中调整大小:

$(window).resize(function(){
if($('#containiframe').length !== 0) {
var heightIframe = $('#containiframe').contents().find('body').height();
 $('#frame').css("height", heightFrame);
}
});

2014-06-16 21:46:52

根据内容调整iframe的大小

推荐文章

最新文章

标签