HTMLページが長くなるたびにイベントをトリガーするにはどうすればよいですか？

Question

iframeを持つページがあります。 iframeの内容によっては、動的JSが発生してコンテンツが大きくなることがあります。 thtaが発生した場合、私はそれは私がIFRAME内で、これをどうされ、十分な長さだことを確認するためのiframeのサイズを変更する必要があります。

親HTMLである

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

そしてこの、：

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

このコードは、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); } 

Answer 2

あなたはやって後にカスタムイベントをトリガーできる "ダイナミックJSのものを。"他の場所では、コールバックがdocument.parentWindow.parent.reSize();を実行する単一のリスナーを接続します。

さらに読書：

• Custom event in HTML, Javascript
• How to trigger event in JavaScript?

Answer 3

たぶん（からそれをトリガーするのiframeをリサイズする親ウィンドウでイベントを結合して、動的なjsのは、それが成長する原因となるたび、それをトリガーiframeのコンテンツ。 この投稿を見る： http://forum.jquery.com/topic/trigger-from-iframe-to-parent-window

Answer 4

このコードを親ウィンドウの閉じたbodyタグのすぐ上に置きます。あなたのiframeサイズ変更コードをコメントのある場所に置きます。

OLD CODE：

<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> 

NEW CODE：

<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> 

だけローカルパスがiframのSRCで動作するため、IE < 9におけるセキュリティ上の制限のためのiframe ID を変更、注意してください