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

【问题标题】：How to get an attribute of element inside two iframes如何在两个 iframe 中获取元素的属性
【发布时间】：2012-09-27 10:49:54
【问题描述】：

<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”）。

【问题讨论】：

标签： javascript jquery html iframe href

【解决方案1】：

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

嵌套 iFrame 的问题在于，由于您设置了 src 属性，我认为您不会那么容易获得访问权限。虽然您可以尝试使用相同的方法。

希望这会有所帮助。

【讨论】：

【解决方案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")）。

【讨论】：

container.innerHTML = container.querySelector("#num2").innerHTML;我收到错误：未捕获的 TypeError：无法读取 null 的属性“innerHTML”
嗯，使用您在问题中发布的 HTML 示例代码，我在 Firefox 和 Opera 中工作正常；在这里试试：jsfiddle.net/4qTc8 你是否更改了 iframe 的 ID？当然，如果引用的元素不存在，我的代码不会检查将发生的错误...
我有 ins 标签，所以它是这样的：我使用代码我可以使用选择器 ins 获得第二个 ins，但是当我尝试获取 iframe 时它失败并始终返回 null 似乎代码的第二行总是抛出错误。带有 container.queryselector 的行。
当我将ins 标签添加到 HTML 代码中时，它仍然对我有效……您的 HTML 一定有所不同。你能提供一个 JSFiddle 来说明这个问题吗？但是我现在添加了对我的解决方案的额外解释（见编辑）。如果您了解基本思想，您应该能够调整代码以使其适合您的 HTML 结构。

【解决方案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'));

*这个简单的任务不需要框架

【讨论】：

【解决方案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 元素，可以在其中找到“选择器”。首先获取第一个 iFrame 的内容（contentDocument），并将其作为选择第二个 iFrame 的上下文。

【讨论】：