Home/ Questions/Q 8431411
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T05:50:55+00:00

I have a page with an iframe that has an html document within it.

  • 0

I have a page with an iframe that has an html document within it. I need to access the iframe’s id from that child document, and am having no luck getting at it with jQuery. The essential structure is this within my page:

<div id="ContainingDiv">
  <iframe id="ContainingiFrame">
   <html>
     <head></head>
     <body>
     </body>
   </html>
  </iframe>
</div>

In my javascript method I can get to anything in the <body> tags using jQuery selectors, but cannot retrieve the iframe element in order to resize it. I’ve tried a few things but am admittedly not an expert in jQuery DOM navigation, particularly where iframes are involved (the iframe is in the same domain as the containing page.) Is there a way I can do this?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    No need for jQuery at all. To get the body object of your parent, you can do this:

    var parentBody = window.parent.document.body

    If it’s on the same domain as your iframe that you are running the code from, once you have that, you can use normal javascript on that object:

    window.parent.document.getElementById("ContainingiFrame").style.height = "400px";

    or with jQuery:

    $("#ContainingiFrame", parentBody).height("400");

    Here’s an article on resizing an iframe from within the iframe with sample code: http://www.pither.com/articles/2010/11/12/resize-iframe-from-within

    And, a related question/answer on resizing an iframe based on it’s own content: Resizing an iframe based on content

    • 0