Question

我有一个包含iframe的页面。 iframe内容有时会执行导致它们增长的动态JS事物。当发生这种情况时，我必须调整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) { }
}

但是，在可能发生调整大小的每个地方，都会对此进行调用。我有什么地方可以说它是“自动的”吗？我可以触发某些事件或什么事情？

相关链接：

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中的安全限制＆lt; 9只有本地路径才能在ifram src中运行

Answer 2

您可以在执行“动态JS事物”后触发自定义事件。在其他地方，只附加一个侦听器，其回调执行document.parentWindow.parent.reSize();。

进一步阅读：

Answer 3

可能在父窗口中绑定一个调整iframe大小的事件，并在动态js使其增长时触发它（从iframe内容触发它）。看看这篇文章： http://forum.jquery.com/topic/trigger-from-iframe-to-parent-window

Answer 4

此代码似乎在Firefox，Chrome 16和IE 8上起作用，至少。它来自@ TimWickstrom.com的答案，但删除了外框的东西并对高度计算进行了一些修改：

<iframe id='ifrm' width='100%' scrolling='no' ...>

var iFrame = document.getElementById('ifrm'); 
function stateChange(){ if (obj.readyState=='loading') { scroll(0,0); } }
iFrame.onreadystatechange='stateChange()';
var iFrameHeight = -1;
function resizeIframe() {
    var iFrameBody = typeof iFrame.contentDocument != 'undefined' ? iFrame.contentDocument.body : iFrame.contentWindow.document.body;
    if (iFrameBody == null) return;
    var newiFrameHeight = typeof window.innerHeight != 'undefined' ? iFrameBody.scrollHeight : (iFrameBody.scrollHeight + iFrameBody.offsetHeight - iFrameBody.clientHeight);
    if(iFrameHeight != newiFrameHeight) {
        iFrameHeight = newiFrameHeight;
        iFrame.style.height = newiFrameHeight;
    }
}
iFrame.onload = function() { setInterval('resizeIframe()', 100); }

每当HTML页面变长时，如何触发事件？

4 个答案: