根据内容高度调整iframe高度

I am opening my blog page in my website. The problem is I can give a width to an iframe but the height should be dynamic so that there is no scrollbar in the iframe, and it looks like a single page...

我正在我的网站上打开我的博客页面。问题是我可以给iframe一个宽度，但是高度应该是动态的，这样iframe中就不会有滚动条，它看起来就像一个单一的页面……

I have tried various JavaScript code to calculate the height of the content but all of them give an access denied permission error and is of no use.

我尝试了各种JavaScript代码来计算内容的高度，但是所有这些代码都给出了一个拒绝访问权限错误，并且没有任何用处。

<iframe src="http://bagtheplanet.blogspot.com/" name="ifrm" id="ifrm" width="1024px" ></iframe>

Can we use Ajax to calculate height or maybe using PHP?

我们可以使用Ajax计算高度，也可以使用PHP?

11 个解决方案

#1

To directly answer your two subquestions: No, you cannot do this with Ajax, nor can you calculate it with PHP.

要直接回答您的两个子问题:不，您不能使用Ajax实现这一点，也不能使用PHP计算它。

What I have done in the past is use a trigger from the iframe'd page in window.onload (NOT domready, as it can take a while for images to load) to pass the page's body height to the parent.

我过去所做的是在窗口中使用来自iframe'd页面的触发器。onload(不是domready，因为它需要一段时间来加载图像)将页面的body height传递给父节点。

<body onload='parent.resizeIframe(document.body.scrollHeight)'>

Then the parent.resizeIframe looks like this:

然后父母。resizeIframe看起来像这样:

function resizeIframe(newHeight)
{
    document.getElementById('blogIframe').style.height = parseInt(newHeight,10) + 10 + 'px';
}

Et voila, you have a robust resizer that triggers once the page is fully rendered with no nasty contentdocument vs contentWindow fiddling :)

这样，你就有了一个健壮的resizer，一旦页面被完全渲染，没有令人讨厌的contentdocument和contentWindow fiddle:)

Sure, now people will see your iframe at default height first, but this can be easily handled by hiding your iframe at first and just showing a 'loading' image. Then, when the resizeIframe function kicks in, put two extra lines in there that will hide the loading image, and show the iframe for that faux Ajax look.

当然，现在人们会首先看到默认高度的iframe，但是这可以通过首先隐藏iframe并显示一个“load”图像来轻松处理。然后，当resizeIframe函数开始工作时，在其中添加两行将隐藏加载图像，并显示iframe以实现这种仿Ajax外观。

Of course, this only works from the same domain, so you may want to have a proxy PHP script to embed this stuff, and once you go there, you might as well just embed your blog's RSS feed directly into your site with PHP.

当然，这只适用于相同的域，所以您可能想要一个代理PHP脚本来嵌入这些内容，一旦您到了那里，您不妨直接将blog的RSS提要嵌入到您的站点中，使用PHP。

#2

You can do this with JavaScript.

你可以用JavaScript完成。

document.getElementById('foo').height = document.getElementById('foo').contentWindow.document.body.scrollHeight + "px";

#3

Fitting IFRAME contents is kind of an easy thing to find on Google. Here's one solution:

拟合IFRAME内容在谷歌上很容易找到。这里有一个解决方案:

<script type="text/javascript">
    function autoIframe(frameId) {
       try {
          frame = document.getElementById(frameId);
          innerDoc = (frame.contentDocument) ? frame.contentDocument : frame.contentWindow.document;
          objToResize = (frame.style) ? frame.style : frame;
          objToResize.height = innerDoc.body.scrollHeight + 10;
       }
       catch(err) {
          window.status = err.message;
       }
    }
</script>

This of course doesn't solve the cross-domain problem you are having... Setting document.domain might help if these sites are in the same place. I don't think there is a solution if you are iframe-ing random sites.

这当然不能解决你遇到的跨域问题。设置文档。如果这些站点位于同一位置，域可能会有所帮助。我不认为有解决的办法，如果你正在建立随机的网站。

#4

Here's my solution to the problem using MooTools which works in Firefox 3.6, Safari 4.0.4 and Internet Explorer 7:

下面是我使用MooTools解决问题的方法，它适用于Firefox 3.6、Safari 4.0.4和Internet Explorer 7:

var iframe_container = $('iframe_container_id');
var iframe_style = {
    height: 300,
    width: '100%'
};
if (!Browser.Engine.trident) {
    // IE has hasLayout issues if iframe display is none, so don't use the loading class
    iframe_container.addClass('loading');
    iframe_style.display = 'none';
}
this.iframe = new IFrame({
    frameBorder: 0,
    src: "http://www.youriframeurl.com/",
    styles: iframe_style,
    events: {
        'load': function() {
            var innerDoc = (this.contentDocument) ? this.contentDocument : this.contentWindow.document;
            var h = this.measure(function(){
                return innerDoc.body.scrollHeight;
            });            
            this.setStyles({
                height: h.toInt(),
                display: 'block'
            });
            if (!Browser.Engine.trident) {
                iframe_container.removeClass('loading');
            }
        }
    }
}).inject(iframe_container);

Style the "loading" class to show an Ajax loading graphic in the middle of the iframe container. Then for browsers other than Internet Explorer, it will display the full height IFRAME once the loading of its content is complete and remove the loading graphic.

对“装入”类进行样式化，以便在iframe容器的中间显示Ajax装入图形。然后对于Internet Explorer以外的浏览器，在内容加载完成后，它将显示完整的IFRAME，并删除加载图形。

#5

Below is my onload event handler.

下面是onload事件处理程序。

I use an IFRAME within a jQuery UI dialog. Different usages will need some adjustments. This seems to do the trick for me (for now) in Internet Explorer 8 and Firefox 3.5. It might need some extra tweaking, but the general idea should be clear.

我在jQuery UI对话框中使用IFRAME。不同的用法需要一些调整。这似乎对我(现在)在Internet Explorer 8和Firefox 3.5中起到了作用。它可能需要一些额外的调整，但总体思路应该是清晰的。

    function onLoadDialog(frame) {
    try {
        var body = frame.contentDocument.body;
        var $body = $(body);
        var $frame = $(frame);
        var contentDiv = frame.parentNode;
        var $contentDiv = $(contentDiv);

        var savedShow = $contentDiv.dialog('option', 'show');
        var position = $contentDiv.dialog('option', 'position');
        // disable show effect to enable re-positioning (UI bug?)
        $contentDiv.dialog('option', 'show', null);
        // show dialog, otherwise sizing won't work
        $contentDiv.dialog('open');

        // Maximize frame width in order to determine minimal scrollHeight
        $frame.css('width', $contentDiv.dialog('option', 'maxWidth') -
                contentDiv.offsetWidth + frame.offsetWidth);

        var minScrollHeight = body.scrollHeight;
        var maxWidth = body.offsetWidth;
        var minWidth = 0;
        // decrease frame width until scrollHeight starts to grow (wrapping)
        while (Math.abs(maxWidth - minWidth) > 10) {
            var width = minWidth + Math.ceil((maxWidth - minWidth) / 2);
            $body.css('width', width);
            if (body.scrollHeight > minScrollHeight) {
                minWidth = width;
            } else {
                maxWidth = width;
            }
        }
        $frame.css('width', maxWidth);
        // use maximum height to avoid vertical scrollbar (if possible)
        var maxHeight = $contentDiv.dialog('option', 'maxHeight')
        $frame.css('height', maxHeight);
        $body.css('width', '');
        // correct for vertical scrollbar (if necessary)
        while (body.clientWidth < maxWidth) {
            $frame.css('width', maxWidth + (maxWidth - body.clientWidth));
        }

        var minScrollWidth = body.scrollWidth;
        var minHeight = Math.min(minScrollHeight, maxHeight);
        // descrease frame height until scrollWidth decreases (wrapping)
        while (Math.abs(maxHeight - minHeight) > 10) {
            var height = minHeight + Math.ceil((maxHeight - minHeight) / 2);
            $body.css('height', height);
            if (body.scrollWidth < minScrollWidth) {
                minHeight = height;
            } else {
                maxHeight = height;
            }
        }
        $frame.css('height', maxHeight);
        $body.css('height', '');

        // reset widths to 'auto' where possible
        $contentDiv.css('width', 'auto');
        $contentDiv.css('height', 'auto');
        $contentDiv.dialog('option', 'width', 'auto');

        // re-position the dialog
        $contentDiv.dialog('option', 'position', position);

        // hide dialog
        $contentDiv.dialog('close');
        // restore show effect
        $contentDiv.dialog('option', 'show', savedShow);
        // open using show effect
        $contentDiv.dialog('open');
        // remove show effect for consecutive requests
        $contentDiv.dialog('option', 'show', null);

        return;
    }

    //An error is raised if the IFrame domain != its container's domain
    catch (e) {
        window.status = 'Error: ' + e.number + '; ' + e.description;
        alert('Error: ' + e.number + '; ' + e.description);
    }
};

#6

How to dynamically adjust an iframe’s height is really simple and tested by me.

如何动态调整iframe的高度真的很简单，我也在测试。

#7

@SchizoDuckie's answer is very elegant and lightweight, but due to Webkit's lack of implementation for scrollHeight (see here), does not work on Webkit-based browsers (Safari, Chrome, various and sundry mobile platforms).

@SchizoDuckie的答案非常优雅和轻量级，但是由于Webkit缺乏scrollHeight的实现(见这里)，所以不能在基于Webkit的浏览器上工作(Safari, Chrome，各种各样的移动平台)。

For this basic idea to work on Webkit along with Gecko and Trident browsers, one need only replace

对于使用Webkit以及Gecko和Trident浏览器的基本想法，只需替换即可

<body onload='parent.resizeIframe(document.body.scrollHeight)'>

with

与

<body onload='parent.resizeIframe(document.body.offsetHeight)'>

So long as everything is on the same domain, this works quite well.

只要所有的东西都在同一个域中，这个就能很好地工作。

#8

I just spent the better part of 3 days wrestling with this. I'm working on an application that loads other applications into itself while maintaining a fixed header and a fixed footer. Here's what I've come up with. (I also used EasyXDM, with success, but pulled it out later to use this solution.)

我花了3天的大部分时间来思考这个问题。我正在开发一个应用程序，它在维护固定的页眉和固定的页脚的同时将其他应用程序加载到自己中。这是我想到的。(我还使用了EasyXDM，取得了成功，但后来又将它取出来使用这个解决方案。)

Make sure to run this code AFTER the <iframe> exists in the DOM. Put it into the page that pulls in the iframe (the parent).

确保在DOM中存在之后运行此代码。将其放入到iframe(父类)的页面中。&lt;/p&gt;

// get the iframe
var theFrame = $("#myIframe");
// set its height to the height of the window minus the combined height of fixed header and footer
theFrame.height(Number($(window).height()) - 80);

function resizeIframe() {
    theFrame.height(Number($(window).height()) - 80);
}

// setup a resize method to fire off resizeIframe.
// use timeout to filter out unnecessary firing.
var TO = false;
$(window).resize(function() {
    if (TO !== false) clearTimeout(TO);
    TO = setTimeout(resizeIframe, 500); //500 is time in miliseconds
});

#9

The trick is to acquire all the necessary iframe events from an external script. For instance, you have a script which creates the iFrame using document.createElement; in this same script you temporarily have access to the contents of the iFrame.

诀窍是从外部脚本获取所有必要的iframe事件。例如，您有一个使用document.createElement创建iFrame的脚本;在这个脚本中，您暂时可以访问iFrame的内容。

var dFrame = document.createElement("iframe");
dFrame.src = "http://www.example.com";
// Acquire onload and resize the iframe
dFrame.onload = function()
{
    // Setting the content window's resize function tells us when we've changed the height of the internal document
    // It also only needs to do what onload does, so just have it call onload
    dFrame.contentWindow.onresize = function() { dFrame.onload() };
    dFrame.style.height = dFrame.contentWindow.document.body.scrollHeight + "px";
}
window.onresize = function() {
    dFrame.onload();
}

This works because dFrame stays in scope in those functions, giving you access to the external iFrame element from within the scope of the frame, allowing you to see the actual document height and expand it as necessary. This example will work in firefox but nowhere else; I could give you the workarounds, but you can figure out the rest ;)

这是可行的，因为dFrame保持在这些函数的范围内，允许您从框架的范围内访问外部iFrame元素，允许您查看实际的文档高度并根据需要展开它。这个例子可以在firefox中使用，但是在其他地方不能使用;我可以给你解决办法，但你可以算出其余的办法。

#10

Try this, you can change for even when you want. this example use jQuery.

试试这个，你可以随时改变。这个例子使用jQuery。

$('#iframe').live('mousemove', function (event) {   
    var theFrame = $(this, parent.document.body);
    this.height($(document.body).height() - 350);           
});

#11

-3

Try using scrolling=no attribute on the iframe tag. Mozilla also has an overflow-x and overflow-y CSS property you may look into.

尝试在iframe标记上使用scroll =no属性。Mozilla还有一个溢出-x和溢出- CSS属性。

In terms of the height, you could also try height=100% on the iframe tag.

在高度方面，您也可以尝试在iframe标记上的height=100%。

#1