javascript - 高度监听器，jQuery

Question

我正在创建一个富文本编辑器。

基本上我有一个启用了设计模式的 iframe。当用户在输入或粘贴文本时靠近 iframe 底部时，我希望它自动调整大小。

我有改变大小的功能。

function changeHeight() {

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

}

我只需要添加一个监听器。我一辈子都找不到一个有效的！

有任何想法吗？

非常感激

-将要

Answer 1

这样做：http ://sonspring.com/journal/jquery-iframe-sizing并添加一个 onkeypress 监听器来检查调整大小。

公平警告：如果内容不在同一个域中 --- 由于 XSS 漏洞预防，它将无法工作（在这种情况下，您无法捕获 keypress 事件）。

这已经在 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 调整大小代码显示在 sonspring 文章中。

**

再次编辑直接附加到 IFRAME 的代码

Source [只替换了原生 DOM 的 jQuery 函数。当我有更多时间时，我会尽我所能]： 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>