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>

我的问题是 - 如何使用javascript或jquery在这两个iframe和两个div中获取a标签的href属性，我更喜欢JS。（比如： “http://www.blablabla.com”）。

Answer 1

好的，所以获取第一个iframe很容易。只需点击name标记上的<iframe>属性，然后使用window.frames['<name-of-your-iframe>']获取其window对象，然后可以使用该对象引用该iFrame的document 。期望document.getElementById('num1')应返回相同的内容似乎是合理的，但后者返回html元素，而前者返回实际的窗口对象，这对您的目的更有用。

嵌套iFrame的问题在于，由于您设置的是src属性，因此我认为您无法轻松获取访问权限。虽然您可以尝试使用相同的方法。

希望这有帮助。

Answer 2

这可能是一个丑陋的解决方案，但至少它有效，而且实际上非常简单：

// 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);

大多数现代浏览器已经支持querySelector()，您只会遇到旧版IE的问题。请参阅http://caniuse.com/queryselector。

修改：此代码基于以下提示：获取iframe的HTML内容并将其复制/插入div元素，以便能够直接对其执行查询（所以我们不需要费心去获取iframe的document对象）。当使用第一个iframe完成此操作后，我们将为第二个（嵌套）iframe重复此操作。然后我们可以简单地读出所需元素的属性。 querySelector()几乎可以像jQuery选择器一样使用（例如$("#id")）。

Answer 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;

最后你得到

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

* 此简单任务无需框架

Answer 4

尝试类似的东西：

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

jQuery-Selector-Method'jQuery（'selector'，context）'允许你指定'context'。它意味着一个jQuery-Element，用于查找其中的“选择器”。首先获取第一个iFrame的内容（contentDocument），并将其用作第二个iFrame选择的上下文。

如何在两个iframe中获取元素的属性

4 个答案: