How do I refer to the document object of an <if

I'm trying to access the document object of a page that lives in an <iframe> from the host page. In other words, I have a page that has an <iframe> in it, and I want to use jQuery on that page (the parent page) to access the document object of that <iframe>.

Specifically, I'm trying to find the height of the <iframe>d document once its content is rendered (onload) so that I can then resize the <iframe> from the parent page to match the height of the <iframe>'s content exactly.

If it's important, this <iframe> is created on the host page using JavaScript, and is in the same domain as the parent page. I already use this type of code:

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

to populate the <iframe> with content, but I don't know the exact syntax for getting the <iframe>'s document object.

For some reason I'm finding a lot of ways to access the parent's document object from within an <iframe> (most with plain JavaScript), but not the other way around.

Thanks in advance for any help!

标签： javascript jquery iframe document parent

5条回答

老娘就宠你

2楼-- · 2020-04-02 09:15

There is many ways to can access to iframe:

For example, we have this HTML page:

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

And JS:

frames[0] == frames['my_frame_name'] == document.getElementById('my_frame_id').contentWindow  // true

0人赞添加讨论(0) 举报

We Are One

3楼-- · 2020-04-02 09:17

Did you wait for the iframe to load as well?

Anyway, the following code works in FF3.5, Chrome 3, IE6, IE7, IE8.
Hosted Demo: http://jsbin.com/amequ (Editable via 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>

0人赞添加讨论(0) 举报

不美不萌又怎样

4楼-- · 2020-04-02 09:21

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

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

will return the document of the first iframe on the page. Remember jQuery objects are arrays of the matching DOM elements

0人赞添加讨论(0) 举报

时光不老，我们不散

5楼-- · 2020-04-02 09:25

If your iframe tag has no src attribute or created dynamically with javascript or jquery, you can use this code snippet to refer to document of iframe and manipulate using 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 () ;

now you can access to dom and add some html to your iframe:

    $myFrameDocument.html ( '<!doctype html><html><head></head><body></body></html>' );

0人赞添加讨论(0) 举报

【Aperson】

6楼-- · 2020-04-02 09:29

I had to do this in a recent project, and I used this:

<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>

Although I have the function inline (makes sense in my project, as the iframe is generated via PHP), If you are appending the iframe via javascript it would be something like

$("#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

0人赞添加讨论(0) 举报

How do I refer to the document object of an <if

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间