HTML 페이지가 길어질 때마다 어떻게 이벤트를 트리거합니까?

Question

iframe이있는 페이지가 있습니다. iframe 내용은 때로는 동적 인 JS 일들을 일으켜서 자랄 수 있습니다.

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) { } 
} 

: 부모 HTML에있는이

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

그리고 : thta이 발생하면, 나는 내가 iframe이 안쪽이 함께 할 수있는, 충분히 확실하게 iframe을 크기를 조정해야

그러나 크기를 조정할 수있는 모든 곳에서이 호출이 뒤죽박죽으로 처리됩니다. 내가 이것을 "자동"으로 넣을 수있는 곳이 어디 있습니까? 내가 어떤 행동을 취할 수 있을까?

관련 링크 :

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

Answer 1

이 코드는 Firefox, Chrome 16 및 Internet Explorer 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

이 코드는 상위 창의 닫는 본문 태그 바로 위에 배치하십시오. 귀하의 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> 

주의 사항은, 9 로컬 경로가 ifram의 SRC

에서 작동으로 인해 IE <의 보안 제한에 iframe이 ID 변경