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

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()。

转载于:https://www.cnblogs.com/aeolian/p/8853882.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/101718.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 基于 vue 实现的电商后台管理系统

    基于 vue 实现的电商后台管理系统源码地址:https://github.com/Hero601/vue_shop后端接口:https://goal.lanzous.com/b01c5hhsb密码:5ees免费的小星星点一个吧~

    2022年5月6日
    74
  • verilog_移位寄存器_仿真(程序逐句解释)

    verilog_移位寄存器_仿真(程序逐句解释)前言  之前老是想着学的快点,就直接编译了程序就下载在开发板上跑,后来发现这样不行,因为如果程序有问题,验证和纠错的时间成本太高了(毕竟vivado跑一次花的时间很长),反过来学习仿真,下面是一点心得和体会。开发环境编译软件及版本:vivado2019.2编译语言:verilog  网上随便找了一个简单程序和仿真,先实现复现,再谈其他。下面我将先给出代码和仿真截图,再说具体的东西。移位寄存器程序代码:`timescale1ns/1ps/////////////////////////

    2022年7月16日
    9
  • android之switch控件的用法

    在做一个蓝牙开关时候,用到了switch,记一下用法,其实跟Button是几乎一样的.布局中:<Switch android:id=”@+id/open” android:layout_width=”wrap_content” android:layout_height=”wrap_content” android…

    2022年3月10日
    40
  • 基本布局-QHBoxLayout类、QVBoxLayout类、QGridLayout类

    基本布局-QHBoxLayout类、QVBoxLayout类、QGridLayout类(1)新建QtWidgetApplication,项目名UserInfo,基类QDialog,取消创建界面;(2)打开dialog.h头文件,在头文件中声明对话框中的各个控件,添加代码#ifndefDIALOG_H#defineDIALOG_H#include//添加头文件#include#include#inclu

    2022年6月21日
    46
  • 分析微商分销系统的缺陷

    分析微商分销系统的缺陷微商时代下,微商系统也十分受欢迎,笔者之前在网上浏览过许多关于微商分销系统的文章,大多都在谈论微商分销系统怎么怎么好用,却很少有提及其中的缺陷。那今天笔者就想和大家伙谈谈微商分销系统有什么缺陷?以三级分销为例,先来了解下微商分销系统的规则。理想的结构是这样的:总部发展A分销商,A-发展二级B,B-发展三级C。好了,A收到BC的提成,B收到C的提成,C纯赚差价利润。理想的设计往…

    2022年5月13日
    36
  • 用c语言实现顺序表_顺序表代码讲解以及实现

    用c语言实现顺序表_顺序表代码讲解以及实现一、学习内容:1、创建顺序表2、按数值查找3、按位置查找4、插入一个数值5、删除一个数值6、销毁顺序表7、求前驱算法8、求后继算法

    2025年6月3日
    0

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号