代码改变世界

静态iframe异步加载

2012-02-18 08:22  边缘er  阅读(1100)  评论(0编辑  收藏  举报

tab选项卡中内容过多时候用到的iframe。

<ul id="nav_ul">
<li>第一个iframe</li>
<li>第二个iframe</li>
<li>第三个iframe</li>
</ul>
<div class="iframe_cont"></div>
<div class="iframe_cont"></div>
<div class="iframe_cont"></div>
<script type="text/javascript">
(
function(){
//取class数组
function getElementsByClass(searchClass,node,tag) {
var classElements = new Array();
if ( node == null )
node
= document;
if ( tag == null )
tag
= '*';
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j]
= els[i];
j
++;
}
}
return classElements;
}
var liArr = document.getElementById('nav_ul').getElementsByTagName('li'),
contArr
= getElementsByClass('iframe_cont'),
len
= liArr.length,
flagArr
= new Array(len);
//初始化
function init(){
for(var i = 0; i < len; i++){
flagArr[i]
= false;
}
contArr[
0].style.display = 'block';
flagArr[
0] = true;
contArr[
0].innerHTML = '<iframe src=\"iframe1.html\" width=\"1002\" height=\"1128\" frameborder=\"0\" scrolling=\"no\" allowtransparency=\"true\"></iframe>'
}
init();
//点击切换
for(var j = 0; j < len; j++){(function(j){
liArr[j].onclick
= function(){
for(var k = 0; k < len; k++){
contArr[k].style.display
= 'none';
}
contArr[j].style.display
= 'block';
if (flagArr[j] == false){
flagArr[j]
= true;
contArr[j].innerHTML
= '<iframe src=\"iframe' + (j+1) + '.html\" width=\"1002\" height=\"1128\" frameborder=\"0\" scrolling=\"no\" allowtransparency=\"true\"></iframe>'
}
}
})(j)
}
})();
</script>