获取所有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

希望有道理？

任何想法

将它添加到我的答案中，但不应该在'head'和'body'之间放置'

答

使用普通的香草JavaScript的：假设loading_iframe函数执行每一个IFRAME完全相同的动作，你可以做的是有一个包含所有的I帧的ID的数组，然后循环通过该阵列。

function load_iframes() { 
    iframes = ["loading_iframe1", "loading_iframe2", "loading_iframe3"]; 
    for (i = 0; i < iframes.length; i++) { 
     loading_iframe(iframes[i]); 
    } 
} 

function loading_iframe(iframe_id){ 
    document.getElementById(iframe_id).style.display = "none"; 
    document.getElementById('loading').style.display = ""; 
    document.getElementById(iframe_id).onload = function(){ 
     document.getElementById('loading').style.display = "none"; 
     document.getElementById(iframe_id).style.display = ""; 
    } 
}

或者，如果你要在从1开始，并在50结束你的iframe的ID的序列号这个版本的load_iframes会的工作，而你并不需要列出所有的iframe中的ID一个数组：

function load_iframes() { 
    num_iframes = 50; 
    for (i = 1; i <= num_iframes; i++) { 
     loading_iframe("loading_iframe" + i); 
    } 
}

使用jQuery：给所有iframe一个CSS类，如loading_iframe。然后，您可以使用jQuery来选择具有loading_iframe类的所有元素。

答

首先，<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 = ""; 
    } 
}

答

只要加入Jeff的答案：我真的推荐你去看看jQuery。它非常强大，像这样的任务应该相当简单。既然你给每个iFrame的一类“loading_iframe”你可以这样做：

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

的执行console.log（）调用假设您在Firefox或谷歌浏览器使用Firebug。不确定这是否适用于其他浏览器。

另请参阅document for .each()。

定型堆栈溢出“你听说过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

获取所有iframe元素

相关推荐