Web*_*bby 13 javascript regex 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>
</body>
</html>
问题是我每页运行大约50个迷你iframe,我不想重写上面的代码来匹配每个iframe id.
有没有办法可以将每个iframe ID与正则表达式匹配,例如:
Pet*_*tai 16
首先,<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>
现在你只需循环遍历所有iframe,你可以通过更改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 = "";
}
}
使用普通的JavaScript:假设该loading_iframe函数对每个iframe执行完全相同的操作,您可以做的是拥有一个包含所有iframe的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 = "";
}
}
或者,load_iframes如果您的iframe ID中的序列号从1开始到50结束,则此版本将起作用,并且您不需要在数组中列出所有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该类的所有元素.