Как мне обратиться к объекту документа ‹iframe› с родительской страницы, используя jQuery?

Я пытаюсь получить доступ к объекту документа страницы, которая находится в ‹iframe› с главной страницы. Другими словами, у меня есть страница с ‹iframe›, и я хочу использовать jQuery на этой странице (родительской странице) для доступа к объекту документа этого ‹iframe›.

В частности, я пытаюсь найти высоту документа ‹iframe›d после того, как его содержимое будет отображено (загружено), чтобы затем изменить размер ‹iframe› с родительской страницы, чтобы он соответствовал высоте ‹iframe› точно содержание.

Если это важно, этот ‹iframe› создается на главной странице с помощью JavaScript и находится в том же домене, что и родительская страница. Я уже использую этот тип кода:

$('iframe').contents().find('body').append('<p>content</p>');

для заполнения ‹iframe› содержимым, но я не знаю точного синтаксиса для получения объекта документа ‹iframe›.

По какой-то причине я нахожу много способов получить доступ к родительскому объекту документа из ‹iframe› (большинство с помощью простого JavaScript), но не наоборот.

Заранее благодарю за любую помощь!


javascript document iframe jquery parent
person Bungle    schedule 15.10.2009    source источник

Ответы (5)


arrow_upward
5
arrow_downward

Вы тоже ждали загрузки iframe?

В любом случае следующий код работает в FF3.5, Chrome 3, IE6, IE7, IE8.
Размещенная демонстрация: http://jsbin.com/amequ (можно редактировать через http://jsbin.com/amequ/edit)

<iframe src="blank.htm" ></iframe> 

<script> 
  var $iframe = $('iframe'); 

  /*** 
  In addition to waiting for the parent document to load 
  we must wait for the document inside the iframe to load as well. 
  ***/ 
  $iframe.load(function(){       
    var $iframeBody = $iframe.contents().find('body'); 

    alert($iframeBody.height()); 

    /*** 
    IE6 does not like it when you try an insert an element 
    that is not made in the target context. 
    Make sure we create the element with the context of 
    the iframe's document. 
    ***/ 
    var $newDiv = $('<div/>', $iframeBody.get(0).ownerDocument); 
    $newDiv.css('height', 2000); 

    $iframeBody.empty().append($newDiv); 

    alert($iframeBody.height()); 
  }); 
</script>
person brianpeiris    schedule 15.10.2009

arrow_upward
3
arrow_downward

Если ваш тег iframe не имеет атрибута src или создан динамически с помощью javascript или jquery, вы можете использовать этот фрагмент кода для ссылки на документ iframe и управления с помощью jquery:

//in your html file

<iframe id="myframe"></iframe>

//your js 

 var doc = $ ( '#myframe' )[0].contentWindow.document ;
             doc.open () ;
             doc.write ( "<div id='init'></div>" ) ;
             doc.close () ;

var $myFrameDocument = $ ( '#myframe' ).contents ().find ( '#init' ).parent () ;

теперь вы можете получить доступ к dom и добавить HTML в свой iframe:

    $myFrameDocument.html ( '<!doctype html><html><head></head><body></body></html>' );
person saeed asalisaf    schedule 16.12.2014

arrow_upward
1
arrow_downward 

$('iframe').contents().get(0)

or

$('iframe').contents()[0]

вернет документ первого iframe на странице. Помните, что объекты jQuery — это массивы соответствующих элементов DOM.

person JeremyWeir    schedule 15.10.2009

arrow_upward
0
arrow_downward

Существует много способов получить доступ к iframe:

Например, у нас есть эта HTML-страница:

<iframe name="my_frame_name" id="my_frame_id">

И JS:

frames[0] == frames['my_frame_name'] == document.getElementById('my_frame_id').contentWindow  // true
person NVI    schedule 15.10.2009
comment
Спасибо за ответ, но ‹iframe› находится в том же домене, что и родительская страница. - person Bungle; 15.10.2009

arrow_upward
0
arrow_downward

Мне пришлось сделать это в недавнем проекте, и я использовал это:

<iframe src="http://domain.com" width="100%" 
border="0" frameborder="0" id="newIframe"
 onload="$(this).css({height:this.contentWindow ? this.contentWindow.document.body.scrollHeight + (20) : this.contentDocument.body.scrollHeight + (20)});" 
style="border:none;overflow:hidden;">

</iframe>

Хотя у меня есть встроенная функция (имеет смысл в моем проекте, поскольку iframe создается через PHP), если вы добавляете iframe через javascript, это будет что-то вроде

$("#container").append('<iframe src="http://domain.com" width="100%" border="0" frameborder="0" id="newIframe" style="border:none;overflow:hidden;"></iframe>');

$("#newIframe").load(function(){
  var _this=$("this")[0];
  $(this).css({
       height:
        _this.contentWindow ? _this.contentWindow.document.body.scrollHeight + (20) : _this.contentDocument.body.scrollHeight + (20)});
});

//contentWindow.document.body is for IE
//contentDocument.body is for everything else
person ekhaled    schedule 15.10.2009
comment
+ (20), если вам интересно, это потому, что сафари решает включить полосы прокрутки, даже если содержимое iframe точно соответствует размерам iframe ... дополнительные 20 пикселей помогают мне найти ... - person ekhaled; 16.10.2009
comment
Вы можете назвать его как угодно, это просто временная переменная для хранения элемента DOM, чтобы к нему можно было получить доступ позже в $().css({}) - person ekhaled; 16.10.2009
comment
Должно ли это работать в браузерах Webkit? Chrome по-прежнему устанавливает высоту iframe в соответствии с высотой родительского документа. Я звоню $(this).css... в загрузку iframe. - person Don Zacharias; 10.09.2010