Слушатель высоты, jQuery - PullRequest
Новая
       6

Слушатель высоты, jQuery

1 голос
/ 17 февраля 2011

Я создаю текстовый редактор.

В основном у меня есть iframe с включенным режимом дизайна.Я бы хотел, чтобы он автоматически менял размер, когда пользователь находился в нижней части iframe во время ввода или вставки текста.

У меня есть функция изменения размера. 

function changeHeight() {

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

}

Я простонужно добавить слушателя.Я не могу ради жизни найти тот, который работает!

Любые идеи?

Высоко ценится

-Будет

1 Ответ

0 голосов
/ 17 февраля 2011

Сделайте это: 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>

Где у вас есть текстовая область (или div,или что-то еще) внутри iframe ... измените фильтр на содержание вашего сердца.Код изменения размера iframe показан в статье sonspring.

**

Повторно отредактируйте код, напрямую подключенный к IFRAME

Source [заменяет только функции jQuery для встроенного DOM.Я вычистлю все, что смогу, когда у меня будет больше времени]: http://www.experts -exchange.com / Программирование / Языки / Сценарии / 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>
...