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)
上一篇 2021年5月26日 下午2:00
下一篇 2021年5月26日 下午3:00


相关推荐

  • linq 实现动态 orderby

    推荐:http://www.cnblogs.com/roucheng/p/dushubiji.html

    2021年12月26日
    63
  • 解决Visual C++工程中包含 .c 或cpp文件编译时产生的.pch预编译头错误(C1853)的办法

    解决Visual C++工程中包含 .c 或cpp文件编译时产生的.pch预编译头错误(C1853)的办法解决 VisualC 工程中包含 c 或 cpp 文件编译时产生的 pch 预编译头错误 C1853 的办法

    2026年3月17日
    2
  • Scrapy框架介绍

    Scrapy框架介绍Scrapy 框架介绍 Scrapy 是一个为了爬取网站信息 提取结构性数据而编写的应用框架 Scrapy 用途广泛 可用于数据挖掘 监测和自动化测试等 1 网络爬虫原理网络爬虫的英文为 WebSpider 又称做网络蜘蛛或网络机器人 简单来说就是一种按照一定的规则 自动地抓取互联网中信息的程序或脚本 1 1 爬虫执行的流程我们知道 网络爬虫的基本流程是 模拟用户使用浏览器向网站发送请求 网站响应请求后将网页文档发送过来 爬虫对网页做信息提取和存储 具体流程如图 3 1 所示 1 发送请求 爬

    2026年3月26日
    2
  • HTML5开发工具介绍-HBuilder[通俗易懂]

    HTML5开发工具介绍-HBuilder[通俗易懂]第一步:打开谷歌浏览器,在百度上搜索HBuilder。第二步:进入网站,选择下载HBuilderX。第三步:打开HBuilder,文件-新建-项目。第四步:选择普通项目-基本HTML项目-创建。第五步:基础的界面如下。…

    2022年7月15日
    21
  • opencv实现视频里人数统计「建议收藏」

    opencv实现视频里人数统计「建议收藏」基于图像的人数统计属于模式识别问题,可应用于安防领域。传统的方法包括:1)视频捕获;2)目标提取(背景建模、前景分析)——常见方法有高斯背景建模、帧差法、三帧差法等;3)目标识别(模式识别、特征点分析),如人脸识别,头肩部识别等,OpenCV里可以使用Hear特征、级联分类器来进行特征检测;4)目标跟踪——基本方法有直方图特征匹配和运动目标连续性匹配,opencv里可以使用CamShift算法直接对

    2022年6月1日
    155
  • vue引入echarts报错解决

    vue引入echarts报错解决在 Vue 项目中引入 Echart 使用 npminstall 指令 的时候报错 PSG gt npminstallnp lock jsonfilewasc npmWARNoldlo n

    2025年7月14日
    9

发表回复

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

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