How to get an attribute of element inside two iframes

Question

<html>
  <head></head>
  <body>
    <iframe id="num1" src="/idk">
      <html>
        <head></head>
        <body>
          <iframe id="num2" src="/idk2">
            <html>
              <head></head>
              <body>
                <div id="div1">
                  <div id="div2">
                    <a href="http://www.blablabla.com"></a>
                  </div>
                </div>
              </body>
            </html>
          </iframe>
        </body>
      </html>
    </body>
    </html>

my question is - How do I get the href attribute of the a tag inside those two iframes and two divs with javascript or jquery, i prefer JS. (ex:"http://www.blablabla.com").

score 2 · Answer 1 · answered Oct 06 '12 at 14:38

Ok, so getting the first iframe is easy. Just slap on a name attribute on the <iframe> tag and use window.frames['<name-of-your-iframe>'] to get its window object that can then be used to reference the document of that iFrame. It seems reasonable to expect that document.getElementById('num1') should return the same thing, but the latter returns the html element, while the former returns the actual window object which is more useful for your purposes.

The problem with the nested iFrame is that since you're setting the src attribute, I don't think you'll be able to get access so easily. Though you can try using this same method.

Hope this helps.

Aletheios · Answer 2 · 2012-10-06T22:50:19.833

1

This may be an ugly solution, but at least it works and it's actually quite simple:

// Create container to store iframes' inner HTML and to be able to work with it
var container = document.createElement("div");
// Add HTML of first iframe to container
container.innerHTML = document.querySelector("#num1").innerHTML;
// Add HTML of nested (second) iframe to container
container.innerHTML = container.querySelector("#num2").innerHTML;
// Finally get href attribute
var href = container.querySelector("#div2 a").getAttribute("href");
console.log(href);

Most modern browsers already support querySelector(), you'll only get problems with older IEs. See http://caniuse.com/queryselector.

Edit: This code is based on the following idea: Get the iframe's HTML content and copy/insert it into a div element in order to be able to directly execute queries on it (so we don't need to bother getting the iframe's document object). When this has been done with the first iframe, we'll repeat it for the second (nested) iframe. Then we can simply read out the attribute(s) of the desired elements. querySelector() can be used almost like a jQuery selector (e.g. $("#id")).

edited Oct 06 '12 at 22:50

answered Oct 06 '12 at 15:14

Aletheios

3,960
2
33
46

container.innerHTML = container.querySelector("#num2").innerHTML; i get the error: Uncaught TypeError: Cannot read property 'innerHTML' of null – user1725191 Oct 06 '12 at 15:36
Hmm works fine for me in Firefox and Opera using the HTML sample code you posted in your question; try it here: http://jsfiddle.net/4qTc8/ Did you perhaps change the IDs of the iframes? Of course my code doesn't check for errors that will occur if the referenced elements don't exist... – Aletheios Oct 06 '12 at 15:49
i have ins tag so its like that: and when i use the code i can get the second ins with selector ins but when im trying to get the iframe it fails and always return null its seems that the second line of the code always throws error. the line with the container.queryselector. – user1725191 Oct 06 '12 at 16:19
When I add the `ins` tags to the HTML code, it still works for me... Your HTML must be somehow different. Can you provide a JSFiddle illustrating the problem? But I've added an extra explanation of my solution now (see edit). If you understand the basic idea, you should be able to adjust the code so it fits your HTML structure. – Aletheios Oct 06 '12 at 22:54

Gabriel Lupu · Answer 3 · 2013-01-15T08:36:10.413

1

var iframe1 = document.getElementById('num1');
var innerDoc1 = iframe1.contentDocument || iframe1.contentWindow.document;

var iframe2 = innerDoc1.getElementById('num2');
var innerDoc2 = iframe2.contentDocument || iframe2.contentWindow.document;

and at last you get

console.log(innerDoc2.getElementById('div2').getAttribute('href'));

*no frameworks necessary for this simple task

edited Jan 15 '13 at 08:36

answered Dec 14 '12 at 09:29

Gabriel Lupu

1,599
1
12
16

score 0 · Answer 4 · answered Dec 14 '12 at 09:21

Try something like that:

var $iframe1 = jQuery('#num1');
var iframe1Content = $iframe1[0].contentDocument || $iframe1[0].contentWindow.document;
// see also: http://stackoverflow.com/questions/926916/how-to-get-the-bodys-content-of-an-iframe-in-javascript/11107977#11107977

var $iframe2 = jQuery('#num2', iframe1Content);
var iframe2Content = $iframe2[0].contentDocument || $iframe2[0].contentWindow.document;

var $link = jQuery('#div2 a', iframe2Content);
console.log($link);

The jQuery-Selector-Method 'jQuery('selector', context)' allowes you to specifiy a 'context'. It means a jQuery-Element, to find the 'selector' within. First get the content (contentDocument) of the first iFrame and use this as the context of selection of the second iFrame.

How to get an attribute of element inside two iframes

4 Answers4

Linked