zoukankan      html  css  js  c++  java
  • Js判断是否联网引入不同js

     需求:当百度地图在内网中也能使用。

     分析:js判断是否联网,然后根据联网状态加载不同js。

     失败案例:

    1、直接document.write

    <script language="javascript"> 

        document.write("<script src='xxx.js'></script>"); 

    </script>

    2、动态改变已有script的src属性

    <script src='' id="s1"></script> 

    <script language="javascript"> 

        s1.src="xxx.js" 

    </script>

    3、动态创建script元素

    <script> 

        var oHead = document.getElementsByTagName('HEAD').item(0); 
        var oScript= document.createElement("script"); 
        oScript.type = "text/javascript"; 
        oScript.src="xxx.js"; 
        oHead.appendChild( oScript); 

    </script>

    失败原因:这三种方法都是异步执行的,也就是说,在加载这些脚本的同时,主页面的脚本继续运行。导致下面的new BMap.Map()直接报错。正确的思路是用函数回调保证js加载完毕后继续执行后面代码。

    正解:

    需要js文件:Jquery.js,Ping.js

    <script language="javascript">
        $(function(){
           var p = new Ping();
           p.ping("http://api.map.baidu.com", function(err, data) {
                 if (err) {  //离线
                    $.getScript("http://127.0.0.1:80/bdmap/js/apiv2.0.min.js",function(){  //加载内网js,成功后执行回调函数
                        $("<link>").attr({ rel: "stylesheet",type: "text/css",href: "http://127.0.0.1:80/bdmap/css/bmap.css"}).appendTo("head");   //引入css
                        loadMap();   
                     });  //加载js文件            
                 }else{   //在线
                     $.getScript("http://api.map.baidu.com/api?v=2.0&ak=xxxxxxxxx",function(){  //加载在线js,成功后执行回调函数
                         loadMap();
                     });  //加载js文件    
                  }
                        
            });
                    
         });
    </script>

    用Ping.js判断是否联网。用Jquery的$.getScript( url [, success(script, textStatus, jqXHR) ] )加载js。如果引入的js和其他js必须按照一定顺序则在$.getScript()回调函数中再执行$.getScript()。

  • 相关阅读:
    mysql数据库存放路径
    mysql 5.5安装不对容易出现问题
    bean的scope属性
    spring四种依赖注入方式
    spring依赖注入(反转控制)
    Tomcat 安装错误
    synchronized详解
    git tag命令
    vjson.hpp
    cmake添加版本号
  • 原文地址:https://www.cnblogs.com/aeolian/p/8853882.html
Copyright © 2011-2022 走看看