Question

我在自动调整iframe高度及其内容时搜索了这个js代码。它发布了发布此内容的用户所说的内容。但是，我现在对iframe中的动态内容存在此问题。

js代码我只使用页面的常规内容，但不在内部进行动态更改时。例如，通过ajax调用显示文本。

我已经尝试过寻找其他解决方案，但其他解决方案的效果与此代码的效果不同。

我希望有人可以帮助我更新代码以满足我目前的需求。我不是很熟悉jquery / javascript来自己做这件事。先感谢您！：）

这是JS代码：

function setIframeHeight(iframeId) {

    var ifDoc, ifRef = document.getElementById(iframeId);
    try {
        ifDoc = ifRef.contentWindow.document.documentElement;
    } catch (e) {
        try {
            ifDoc = ifRef.contentDocument.documentElement;
        } catch (ee) {}
    }

    if (ifDoc) {
        ifRef.height = 1;
        ifRef.height = ifDoc.scrollHeight;

        /* For width resize, enable below.  */

        //ifRef.width = 1;
        //ifRef.width = ifDoc.scrollWidth; 
    }
}

我发现了这个其他代码，它使iframe能够适应其动态内容，但我不知道如何制作上面的代码并将其协同工作。请帮帮我。

var iframe = document.getElementById("ifr").contentWindow;
iframe.$(".toggle_div").bind("change", function () {
$("#ifr").css({
    height: iframe.$("body").outerHeight()
    });
});

总而言之，我需要一个代码来自动化iframe及其内容，如果内容的大小发生变化，我会再次自动调整大小。

Answer 1

问题是，当iframe正文调整大小时，您的页面没有任何触发器指示调整大小。

还有（据我所知）javascript中没有任何内容可以让你观察元素高度的变化。

您有两种选择。

如果您是iframe内容的所有者，您可以在该页面中放置一个脚本，该脚本可以调用它的父窗口，告诉父级运行调整大小脚本，或者您可以运行一个检查更改的函数。或者。

对于第一种方法，您可以按照Can events fired from an iframe be handled by elements in its parent?

的答案进行操作

否则只需做一个

setTimeout(function(){
  $("#ifr").css({
    height: iframe.$("body").outerHeight()
    });
  },1000);

Answer 2

function adjustMyFrameHeight()
            {
                var frame = getElement("myFrame");
                var frameDoc = getIFrameDocument("myFrame");
                frame.height = frameDoc.body.offsetHeight;
            }

在iframe onload事件上调用此方法，并将mtFrame替换为您的iframe ID

如何使iframe自动调整其内容的动态更改？

2 个答案: