javascript - 如何在 HTML 页面变长时触发事件？

Question

我有一个带有 iframe 的页面。 iframe 内容有时会执行导致它们增长的动态 JS 操作。当 thta 发生时，我必须调整 iframe 的大小以确保它足够长，我在 iframe 中这样做:

// I saved you the boredom of all the try{}s and != nulls, this is just the meat.
document.parentWindow.parent.reSize();

还有这个，在父 html 中:

function reSize()
{
    try
    {
        var oBody   =   ifrm.document.body;
        var oFrame  =   document.all('ifrm');

        oFrame.style.height = oBody.scrollHeight + (oBody.offsetHeight - oBody.clientHeight) + 100;
    }
    //An error is raised if the IFrame domain != its container's domain
    catch(e) { }
}

但是，在可能发生调整大小的每个地方，到处都是对此的调用。有什么地方可以把它放在“自动”的地方吗？我可以触发某些事件或其他什么？

相关链接:

• How do I detect iframe resize?
• resize iframe dynamically in ASP
• how to detect iframe resize?

Answer 1

将此代码放在父窗口的结束主体标记的正上方。将您的 iframe 大小调整代码放在注释的位置。

旧代码:

<script>
    var intWinHeight = (typeof window.innerHeight != 'undefined' ? window.innerHeight : document.body.offsetHeight);

    var resizeIframe = function() {
        var newWinHeight = (typeof window.innerHeight != 'undefined' ? window.innerHeight : document.body.offsetHeight);
        if(newWinHeight != intWinHeight) {
            intWinHeight = newWinHeight;
            // execute your Iframe resizing code here

        }
    }
    setInterval(resizeIframe, 100);
</script>

新代码:

<script type="text/javascript">

    var iFrameId = document.getElementById('myIframe');
    var intWinHeight = (typeof window.innerHeight != 'undefined' ? window.innerHeight : document.body.offsetHeight);
    var intIframHeight = (typeof iFrameId.contentWindow.window.innerHeight != 'undefined' ? iFrameId.contentWindow.window.innerHeight : iFrameId.contentWindow.document.body.offsetHeight);
    function exeResizeIframe() {
        var newWinHeight = (typeof window.innerHeight != 'undefined' ? window.innerHeight : document.body.offsetHeight);
        var newIframHeight = (typeof iFrameId.contentWindow.window.innerHeight != 'undefined' ? iFrameId.contentWindow.window.innerHeight : iFrameId.contentWindow.document.body.offsetHeight);
        if((newWinHeight != intWinHeight) || intIframHeight != newIframHeight) {
            intWinHeight = newWinHeight;
            intIframHeight = newIframHeight;
            // execute your Iframe resizing code here

        }
    }
    setInterval("exeResizeIframe()", 100);
</script>

请注意，更改 iframe ID由于 IE < 9 中的安全限制，只有本地路径可以在 ifram src 中工作