javascript - 可以在不重新加载框架的情况下调整 iframe 的大小吗？

Question

您好 Stack Overflow 社区。 我有个问题。我有一个带有 iFrame 的进程。 这个过程有一些 Javascript 来根据 iFrame 内容设置 iFrame 高度。我认为这还不够，所以我决定根据内容更改自动调整 iFrame 高度的大小，而无需重新加载任何 iFrame 或进程。不幸的是，我尝试过但由于怀疑而无法做到。我在 Stack Overflow 中到处搜索，但没有找到解决方案。

规则:

• 在 iFrame 中自动调整高度。
• 父窗口或 iFrame 中没有重新加载。
• 没有触发器，没有间隔。
• 一切都是自动的。

Window 和 iFrame 在同一个域中。

你能帮帮我吗？ 谢谢，抱歉英语不好。

我的实际代码:

if(document.getElementById("frame") != undefined)
{
    var frame = document.getElementById("frame");

        $(frame).load(function(){
            var frame_height = frame.contentWindow.document.body.scrollHeight + 'px';
            frame.setAttribute('style', 'height:' + frame_height + ' !important');
            console.log('its this loading?');
            contentBasedIframeResize(); //this is worthless, just testing. isn't dynamic right now. need fix.
        // As soon as the frame finish the load, this frame height will be based in the frame content
        });

        function contentBasedIframeResize()
        {
            var add_button = $(frame).contents().find(".some_obj"); //preparing the trigger
            var remove_button = $(frame).contents().find(".some_obj"); //preparing the trigger

            if(add_button != undefined)
            {
                $(add_button).click(function(){
                    var add_height = frame.contentWindow.document.body.scrollHeight + 'px';
                    frame.setAttribute('style', 'height:' + add_height + ' !important');
                });
            }

            if(remove_button != undefined)
            {
                $(remove_button).click(function(){
                    var remove_height = $("#frame").contents().find("#table_obj").height();
                    remove_height = parseInt(remove_height) + 100; //hardcoded
                    frame.setAttribute('style', 'height:' + remove_height + 'px !important');
                    console.log("its this working v2?");
                });
            }
        }
    }

Answer 1

试试这个，

function resizeIframe(obj)
{
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}

$('iframe').load(function(){
    resizeIframe(this);
});