How to expose IFrame’s DOM using jQuery?

by

To get the window object for a frame you can use the window.frames array:

var iframewindow= frames['iframe_name'];

This requires that you give the <iframe> an old-school name attribute instead-of-or-as-well-as the id. Alternatively if you know the order of iframes on the page you can index them numerically:

var iframewindow= frames[0];

It’s generally more flexible to get the iframe window from the iframe element in the DOM, but this requires some compatibility code to cope with IE:

var iframe= document.getElementById('iframe_id');
var iframewindow= iframe.contentWindow? iframe.contentWindow : iframe.contentDocument.defaultView;

jQuery defines the contents() method to grab the document node, but it doesn’t give you a cross-browser way to go from the document to the window, so you’re still stuck with:

var iframe= $('#iframe_id')[0];
var iframewindow= iframe.contentWindow? iframe.contentWindow : iframe.contentDocument.defaultView;

which isn’t really a big win.

(Note: be very careful using jQuery for cross-frame-scripting. Each frame needs its own copy of jQuery and methods from one frame’s copy won’t necessarily work on nodes from the other. Cross-frame-scripting is a topic fraught with traps.)

More Related Contents:

  1. .prop() vs .attr()
  2. How do I select text nodes with jQuery?
  3. Check if an image is loaded (no errors) with jQuery
  4. How to hide a in a menu with CSS?
  5. Find DOM element by ID when ID contains square brackets?
  6. Finding line-wraps
  7. How to get the element clicked (for the whole document)?
  8. Why are duplicate ID values not allowed in HTML?
  9. jQuery DOM changes not appearing in view source
  10. Is there a DOM event that fires when an HTML select element is closed?
  11. AngularJS: How to run additional code after AngularJS has rendered a template?
  12. How to detect when an iframe has already been loaded
  13. Is there any “on DOM change” event? [duplicate]
  14. How do I monitor the DOM for changes?
  15. change html text from link with jquery
  16. Jquery Event Not Triggering for DOM Elements Created after page load [duplicate]
  17. Converting a recursive function into an asynchronous CPS implementation (javascript)
  18. jQuery/Javascript – How to wait for manipulated DOM to update before proceeding with function
  19. Why do multiple `.appendTo` calls on a newly created jQuery element only append it once?
  20. DOM Mutation event in JQuery or vanilla Javascript
  21. Convert String to XML Document in JavaScript
  22. How to set DOM element as first child?
  23. JQuery – animate moving DOM element to new parent?
  24. Open new window without focus on it [duplicate]
  25. How can I remove wrapper (parent element) without removing the child?
  26. window.getSelection return html [duplicate]
  27. jQuery difference between :eq() and :nth-child()
  28. What’s the difference between a jQuery object and a DOM element? Difference between .get() and .index()?
  29. In web browsers, what’s the difference between onblur and onfocusout?
  30. Create a table in SVG

Leave a Comment