高度監聽器，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中有一個textarea（或div，或其他）...將過濾器更改爲你心中的內容。 iframe調整代碼顯示在彈簧文章中。

**

代碼再次編輯附接到IFRAME直接

來源[僅更換jQuery函數爲源DOM。我會清理掉什麼，我可以當我有更多的時間]： 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>