<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=""></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:"").
<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."></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.").
Share Improve this question edited Oct 6, 2012 at 14:21 Konrad Viltersten 39.3k85 gold badges287 silver badges509 bronze badges asked Oct 6, 2012 at 14:08 user1725191user1725191 511 silver badge3 bronze badges4 Answers
Reset to default 2Ok, 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.
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./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")).
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
Try something like that:
var $iframe1 = jQuery('#num1');
var iframe1Content = $iframe1[0].contentDocument || $iframe1[0].contentWindow.document;
// see also: http://stackoverflow./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.