1. 首頁
  2. 問答
  3. 如何獲得元素的屬性的兩個I幀

如何獲得元素的屬性的兩個I幀

2012-10-06 109 views
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>

我的問題是內部的 - 我如何獲得一個標籤的這兩個Iframe和兩個div JavaScript或jQuery的內部href屬性，我喜歡JS。 （比如： 「http://www.blablabla.com」）。如何獲得元素的屬性的兩個I幀

來源

2012-10-06 user1725191

回答

2

好吧，所以獲得第一個iframe很容易。只需使用標記上的name屬性並使用window.frames['<name-of-your-iframe>']即可獲取其window對象，然後該對象可用於引用該iFrame的document。期望document.getElementById('num1')應該返回相同的東西似乎是合理的，但後者返回html元素，而前者返回實際的窗口對象，這對於您的目的更有用。

嵌套的iFrame的問題是，因爲你設置了src屬性，所以我認爲你不能很容易地訪問。儘管你可以嘗試使用這種相同的方法。

希望這會有所幫助。

來源

2012-10-06 14:38:03 Mutahhir

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重複它。然後，我們可以簡單地讀出所需元素的屬性。幾乎可以像jQuery選擇器一樣使用querySelector()（例如$("#id")）。

來源

2012-10-06 15:14:55 Aletheios

+0

container.innerHTML = container.querySelector（ 「＃NUM2」）的innerHTML。 我得到的錯誤：未捕獲TypeError：無法讀取屬性'innerHTML'null – user1725191

+0

嗯，在Firefox和Opera中使用您在問題中發佈的HTML示例代碼可以正常工作;嘗試在這裏：http://jsfiddle.net/4qTc8/你可能會改變iframe的ID？當然，如果引用的元素不存在，我的代碼不會檢查將發生的錯誤... – Aletheios

+0

我有插件標記，以便它像：