zoukankan      html  css  js  c++  java
  • 静态iframe异步加载

    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>
  • 相关阅读:
    C++继承 派生类中的内存布局(单继承、多继承、虚拟继承)
    Linux 共享库(动态库)
    虚幻4
    从头认识java-16.5 nio的数据转换
    JavaScript实现禁用键盘和鼠标的点击事件
    Codeforces Round #277.5 (Div. 2)部分题解
    iOS-WKWebView使用
    我学cocos2d-x (三) Node:一切可视化对象的祖先
    Android Studio右下角不显示当前branch名称
    Neo4j简单的样例
  • 原文地址:https://www.cnblogs.com/bianyuan/p/2356664.html
Copyright © 2011-2022 走看看