獲取所有iframe元素

嗨我展示，而一些外部iFrame是載有下面的代碼加載指示燈：獲取所有iframe元素

<html> 

<head> 
    <title>Loading iframe</title> 
</head> 

<script> 


function loading_iframe(){ 
    document.getElementById('loading_iframe').style.display = "none"; 
    document.getElementById('loading').style.display = ""; 
    document.getElementById('loading_iframe').onload = function(){ 
     document.getElementById('loading').style.display = "none"; 
     document.getElementById('loading_iframe').style.display = ""; 
    } 
} 
</script> 

<body> 
<iframe id="loading_iframe" src="iframe.html" width="800" height="100"></iframe> 
<div id="loading">Loading...</div> 


<script> 
loading_iframe(); 

</script>

問題是我跑每頁約50個迷你Iframe和我不牛逼看中重寫上面的代碼的iframe每個ID相符笑......是的，我認爲在很多JS哈哈

一個新手有沒有一種方法，我可以每個iframe的ID與正則表達式的例子 loading_iframe1 loading_iframe2匹配 loading_iframe3

希望有道理？

任何想法

來源

2010-09-22 Webby

將它添加到我的答案中，但不應該在'head'和'body'之間放置'

首先，<script>標籤應該去無論是在<head>或<body>但不能在兩者之間！

我會稍微改變你的命名方案，以這樣的：

<iframe id="iframe1" src="iframe.html" width="800" height="100"></iframe> 
<div id="iframe1-L">Loading...</div> 

<iframe id="iframe2" src="blah.html" width="800" height="100"></iframe> 
<div id="iframe2-L">Loading...</div>

現在你只要通過所有的I幀必須循環，你可以很容易地通過改變ID訪問相應的div +"-L"

要獲取所有iframe元素使用getElementsByTagName()，然後遍歷那些有一個for循環：

事情是這樣的：

var i, frames; 
frames = document.getElementsByTagName("iframe"); 
for (i = 0; i < frames.length; ++i) 
{ 
     // The iFrame 
    frames[i].style.display = "none"; 
     // The corresponding DIV 
    getElementById(frames[i].id + "-L").style.display = ""; 
    frames[i].onload = function() 
    { 
     getElementById(frames[i].id + "-L").style.display = "none"; 
     frames[i].style.display = ""; 
    } 
}

來源

2010-09-22 22:17:04

只要加入Jeff的答案：我真的推薦你去看看jQuery。它非常強大，像這樣的任務應該相當簡單。既然你給每個iFrame的一類「loading_iframe」你可以這樣做：

$(".loading_iframe").each(function(index) { 
    console.log(this); ; 
});

的執行console.log（）調用假設您在Firefox或谷歌瀏覽器使用Firebug。不確定這是否適用於其他瀏覽器。

另請參閱document for .each()。

來源

2010-09-22 22:36:37 spier

定型堆棧溢出「你聽說過jquery」的回覆:) – marcospgp 2016-09-10 00:17:22

是的，沒有什麼關於jQuery的神奇，你可以做到這一點沒有它：Array.prototype.forEach.call（document.getElementsByClassName（「loading_frame」），function（frame）{console.log（frame）;}）'。有點冗長，但你可以重構它到你的常見用例，你不需要加載jQuery。 – amn 2017-04-05 14:18:47

相關問題