天天看點

關于IE浏覽器加載外部js注意事項

        幾年前,我還是一個做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類,偶的個神~

經過不斷的嘗試編寫,最後使用如下方式:

<script type="text/javascript" src="baidu_map.js"></script>

<script >

// 建立百度地圖對象執行個體并初始化地圖

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類,這時候奇迹出現了,效果出來了!!

<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="http://api.map.baidu.com/api?v=2.0&ak=我的序列号"></script>

<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>

<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>

<script type="text/javascript" src="baidu_map.js"></script>

<script>

// 建立百度地圖對象執行個體并初始化地圖

var baidu_map = new CBaiduMap();

baidu_map.Initailize();

window.setInterval("RemoveLogo()",500);

</script>

</html>

總結:不論是否是IE的問題,問題的絕對是:如果按照這種方式其他浏覽器一樣支援,是以先引入後使用的方式是标準,按照标準的方式程式設計才不會出現意想不到的問題!!

注意:引入的同時(在引入的script裡)不要使用外部引入類,否則不識别,隻有前面引入後才使用外部類才不會出錯!