Js判断是否联网引入不同js

全栈程序员-站长 • 2021年5月26日下午2:00 • 未分类 • 阅读 112

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

分析：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>

失败原因：这三种方法都是异步执行的，也就是说，在加载这些脚本的同时，主页面的脚本继续运行。导致下面的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>