Height Listener, jQuery

Question

서식있는 텍스트 편집기를 만들고 있습니다.

기본적으로 디자인 모드를 사용할 수있는 iframe이 있습니다. 사용자가 입력하거나 텍스트를 붙여 넣는 동안 iframe의 맨 아래에 가까워지면 자동으로 크기를 조정하고 싶습니다.

크기를 변경할 수있는 기능이 있습니다.

function changeHeight() { 

    $(iframe).height($(iframe.contentWindow.document).height()); 

} 

청취자를 추가하기 만하면됩니다. 나는 내 삶이 작동하는 것을 발견 할 수 없다!

아이디어가 있으십니까?

은 많은

인걸요

Answer 1

감사이 작업을 수행 : http://sonspring.com/journal/jquery-iframe-sizing 및 크기 조정을 확인하는 때 onKeyPress 리스너를 추가합니다.

경고 : 콘텐츠가 동일한 도메인 내에 있지 않은 경우 XSS 취약성 예방으로 인해 작동하지 않습니다 (이 경우 키 누르기 이벤트를 걸러 낼 수 없음).

이것은 IE7에서 작동하도록 테스트되었으며, 대부분의 브라우저에서 작동해야합니다. 실제로 iFrame 자체에 연결하지는 않습니다. 관심있는 요소만큼 (실제로 몸이 될 수도 있습니다).

<script type="text/javascript" language="javascript"> 
    $(document).ready(function() { 
    $('#IFRAME').contents().find('textarea').bind('keypress', function() { 
     //Dostuff  
    }) 
    }); 
</script> 

<iframe src="/whatever.html" width="800" height="400" id="IFRAME" ></iframe> 

iframe 내부에 텍스트 영역 (또는 div 등)이있는 경우 필터를 마음 속의 콘텐츠로 변경하십시오. Iframe 크기 조정 코드가 sonspring 기사에 표시됩니다.

직접

소스를 IFRAME에 부착 코드를 다시 **

편집 [네이티브 DOM에 대한 jQuery를 기능을 대체했다. 어쩌면 [jQuery를 API를 (HTTP를 검토 http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_25589672.html

**

<script> 
    $(document).ready(function() { 
    var f = $('#IFRAME')[0]; 
    var fwin = f.contentWindow || f.contentDocument; 
    fwin.document.designMode = 'on'; 

    var evt_key = function(e) { 
     e = e || fwin.event; 
     var range = null, ret = null; 

     if (fwin.document.selection) { 
     range = fwin.document.selection.createRange(); 
     ret = range.parentElement(); 
     } 
     else if (fwin.window.getSelection) { 
     var range = fwin.window.getSelection().getRangeAt(0); 
     ret = range.commonAncestorContainer.parentNode || fwin.document; 
     } 

     fwin.parent.eventCallback(); 
    }; 

    if (fwin.document.attachEvent) { 
     fwin.document.attachEvent('onkeypress', evt_key); 
    } 
    else if (fwin.document.addEventListener) { 
     fwin.document.addEventListener('keypress', evt_key, false); 
    } 
    }) 

    function eventCallback() { 
    alert('Key Pressed'); 
    } 
</script> 

<iframe src="#" width="800" height="400" id="IFRAME" ></iframe>