How to Expose Iframe's Dom Using Jquery

How to expose IFrame's DOM using jQuery?

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

how to access iFrame parent page using jquery?

To find in the parent of the iFrame use:

$('#parentPrice', window.parent.document).html();

The second parameter for the $() wrapper is the context in which to search. This defaults to document.

How can I access the contents of an iframe with JavaScript/jQuery?

I think what you are doing is subject to the same origin policy. This should be the reason why you are getting permission denied type errors.

How to access the content of an iframe with jQuery?

You have to use the contents() method:

$("#myiframe").contents().find("#myContent")

Source: http://simple.procoding.net/2008/03/21/how-to-access-iframe-in-jquery/

API Doc: https://api.jquery.com/contents/

Retrieving a document's parent iframe in jQuery

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

Get HTML inside iframe using jQuery

This line will retrieve the whole HTML code of the frame. By using other methods instead of innerHTML you can traverse DOM of the inner document.

document.getElementById('iframe').contentWindow.document.body.innerHTML

Thing to remember is that this will work only if the frame source is on the same domain. If it is from a different domain, cross-site-scripting (XSS) protection will kick in.

How to create an iframe using jQuery, and display on page?

jQuery's load function isn't used this way. It takes a URL as a parameter, among others, and loads the response from that URL.

If you are trying to create an iframe DOM element, use the jQuery function to do this and append it where you want:

$('<iframe src="http://google.com" frameborder="0" scrolling="no" id="myFrame"></iframe>')
     .appendTo('.accordion');

or

$('<iframe>', {
   src: 'http://google.com',
   id:  'myFrame',
   frameborder: 0,
   scrolling: 'no'
   }).appendTo('.accordion');

Selecting an element in iframe with jQuery

var iframe = $('iframe'); // or some other selector to get the iframe
$('[tokenid=' + token + ']', iframe.contents()).addClass('border');

Also note that if the src of this iframe is pointing to a different domain, due to security reasons, you will not be able to access the contents of this iframe in javascript.

Why can't I traverse this element using iframe object and jQuery?

You should use iframe.contentWindow.document instead of iframe.contentWindow in combination with find() and text() and it should work. Try this:

$(document).ready(function() {
  setTimeout(function() {
    var iframe = document.getElementById("iframe");
    var iframeWindow = iframe.contentWindow.document;
    var text = $(iframeWindow).find(".c1:nth-child(3) .c2").text();
    console.log(text);

    //PRINTS "INNER MOST"

  }, 1000);

});

As per MDN documentation says:

The contentWindow property returns the Window object of an iframe element. You can use this Window object to access the iframe's document and its internal DOM. This attribute is read-only, but its properties can be manipulated like the global Window object.

You can read more about iframe elements and how they work here.

jQuery show() not working within iFrame

You need to get the reference to the iframe and access its document, then search the DOM with the iframe document as the context.

Live demo here (click).

Here's the generic JavaScript for this:

$iframe = $('#myIframe'); 
$iframeElem = $('#myIframeElem', $iframe.contents());

And code specific to your usage:

Markup:

<iframe id="myIframe"></iframe>

In page2.html:

<div class="Container">
  <p class="showThis" style="display:none;">Show me!</p>
</div>

JavaScript:

iframe = $('#myIframe');

$iframe.load(function() {
  $iframeElem = $('.showThis', $iframe.contents());
  $iframeElem.show();
});

$iframe.attr('src', 'page2.html');

---

Related Topics