可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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

回答1:

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.

回答2:

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

回答3:

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

回答4:

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.