Question

Hi 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);
});

可以在不重新加载帧的情况下调整iframe的大小？

1 个答案: