关于IE浏览器加载外部js注意事项

来源：互联网发布：淘宝店铺装修素菜编辑：程序博客网时间：2024/05/16 09:32

几年前，我还是一个做Java的程序猿，虽然说不上是高手，起码对JavaWeb相关技术有一定的了解，写一些前端的html或js没什么问题，几乎也没遇到过问题，不过已经转行n年了，Java的事已经忘记的一干二净了，一旦遇到点问题就不知道怎么解决了，庆幸的事，我花了部分时间把疑难杂症解决了：

使用C++调用HTML加载百度地图，为了使编程面向对象化，我想将百度地图封装成类并且将实用类放置到一个baidu.js里面去，然后由html引入baidu.js，另外baidu.js引用了百度js脚本，所以我在js的开头使用document.write的方式动态引入脚本，第一步我按照如下步骤进行：

html中加载baidu.js如下所示：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap
{
width: 100%;
height: 100%;
overflow: hidden;
margin:0;
font-family:"微软雅黑";
}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script>
function RemoveLogo(){
$('#allmap div.anchorBL').remove();
}
</script>
<title>安居宝智能监控平台</title>
</head>
<body>
<div id="allmap">
</div>
<OBJECT ID="gis_msp" WIDTH="0" HEIGHT="0" CLASSID="CLSID:57608214-2208-4FF2-9FA1-1356D1D55348"
CODEBASE="GisMap.ocx#version=1,0,0,1" >
</OBJECT>
</body>
<script type="text/javascript" src="baidu_map.js">

// 新建百度地图对象实例并初始化地图
var baidu_map = new CBaiduMap();
baidu_map.Initailize();
window.setInterval("RemoveLogo()",500);

</script>

结果： IE报无法识别的BMap类，偶的个神~

经过不断的尝试编写，最后使用如下方式：

// 新建百度地图对象实例并初始化地图
var baidu_map = new CBaiduMap();
baidu_map.Initailize();
window.setInterval("RemoveLogo()",500);

</script>

我想这个问题很多人遇到但是恰巧不知道怎么解决，网络上的文章也没有刻意提及；对于IE讲可能的原因是只有引入外部脚本后才能使用，没有引入或同时引入同时使用本地的脚本可能先加载，被引入的脚本可能后加载，由于加载顺序不一致，被依赖的项目未加载导致未定义错误！！！于是这个问题我就这么理解，这么解决了。

后来，我又往该地图上添加新功能（地图上多个标注比较近的时候，当缩小的时候图标聚合成一个图标且图标上显示数字标识有几个图标在一块），这时候新功能是在1.2版本上已经实现的，最新的百度api是2.0，所以必须在2.0基础上引用1.2版本的js，但是呢1.2版本的js必须依赖2.0里的旧的类，也就是2.0最全的东西必须先于1.2js加载，于是我在baidu.js里面这么写，动态加载外部js脚本：

document.write("<script type='text/javascript' src='http://api.map.baidu.com/api?v=2.0&ak=我申请的序列号></script>");
document.write("<script type='text/javascript' src='http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js'></script>");
document.write("<script type='text/javascript' src='http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js'></script>");

我也是按照顺序加载的，但是跑起来一直报BMap不识别，查了网页说这么写其他浏览器可能正常，但IE就不正常了，原因是在IE里extIconOverlay_min.js脚本要比src='http://api.map.baidu.com/api?v=2.0&ak=我申请的序列号更先加载，所以导致不对，后来网友又提供了一种方式将src='http://api.map.baidu.com/api?v=2.0&ak=我申请的序列号改成老的使用方式直接获取脚本.../getscript?...但是我拷贝过来，结果依旧！！！

折腾了大半天的时候，差点要放弃了，这时候静下进来，将之前的html看了一遍，这时候才想起之前的js引入方法，于是呼我将所有的js加载放到html中，按照先后循序引入js，而且引入的js中间不调用其他的js，最后写一个空js，在其中调用前面引入的js类，这时候奇迹出现了，效果出来了！！

// 新建百度地图对象实例并初始化地图
var baidu_map = new CBaiduMap();
baidu_map.Initailize();
window.setInterval("RemoveLogo()",500);

</script>

</html>

总结：不论是否是IE的问题，问题的绝对是：如果按照这种方式其他浏览器一样支持，所以先引入后使用的方式是标准，按照标准的方式编程才不会出现意想不到的问题！！

注意：引入的同时（在引入的script里）不要使用外部引入类，否则不识别，只有前面引入后才使用外部类才不会出错！

0 0