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

4

4 回答 4

2

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

嵌套 iFrame 的问题在于，由于您正在设置src属性，我认为您无法如此轻松地获得访问权限。尽管您可以尝试使用相同的方法。

希望这可以帮助。

于 2012-10-06T14:38:03.687 回答
1

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

// 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")）。

于 2012-10-06T15:14:55.417 回答
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;

最后你得到

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

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

于 2012-12-14T09:29:30.877 回答
0

尝试这样的事情：

​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 的上下文。

于 2012-12-14T09:21:56.137 回答