最近專案進入到了驗收階段，需要相容不同的瀏覽器，海康的Demo寫了一個判斷外掛是否成功安裝的函式，但是經過測試，只在IE瀏覽器下有效果，在其他的瀏覽器下面會出現Bug，現在需要寫一個通用的方法，在不同的瀏覽器使用場景下都能判斷海康的視訊外掛是否安裝
首先，需要判斷使用者當前使用的瀏覽器版本，我在網上找到了一個函式，程式碼如下：
function getExplorerInfo() {
var explorer = window.navigator.userAgent.toLowerCase();
//ie
if (explorer.indexOf("msie") >= 0) {
var ver = explorer.match(/msie ([\d.]+)/)[1];
return { type: "IE", version: ver };
}
//firefox
else if (explorer.indexOf("firefox") >= 0) {
var ver = explorer.match(/firefox\/([\d.]+)/)[1];
return { type: "Firefox", version: ver };
}
//Chrome
else if (explorer.indexOf("chrome") >= 0) {
var ver = explorer.match(/chrome\/([\d.]+)/)[1];
return { type: "Chrome", version: ver };
}
//Opera
else if (explorer.indexOf("opera") >= 0) {
var ver = explorer.match(/opera.([\d.]+)/)[1];
return { type: "Opera", version: ver };
}
//Safari
else if (explorer.indexOf("Safari") >= 0) {
var ver = explorer.match(/version\/([\d.]+)/)[1];
return { type: "Safari", version: ver };
}
}
alert("瀏覽器:" + getExplorerInfo().type + "\n 版本:" + getExplorerInfo().version);
判斷瀏覽器版本
但是在實際的呼叫中，發現這個函式並不準確，我測試了一下幾個不同瀏覽器返回的window.navigator.userAgent值（即使用者當前使用的瀏覽器型號）
搜狗瀏覽器
mozilla/5.0 (windows nt 10.0; wow64) applewebkit/537.36 (khtml, like gecko) chrome/49.0.2623.221 safari/537.36 se 2.x metasr 1.0
Chrome瀏覽器
mozilla/5.0 (windows nt 10.0; wow64) applewebkit/537.36 (khtml, like gecko) chrome/53.0.2785.104 safari/537.36 core/1.53.3538.400
QQ瀏覽器
mozilla/5.0 (windows nt 10.0; wow64) applewebkit/537.36 (khtml, like gecko) chrome/53.0.2785.104 safari/537.36 core/1.53.3538.400
IE瀏覽器
mozilla/5.0 (windows nt 10.0; wow64; trident/7.0; .net4.0c; .net4.0e; .net clr 2.0.50727; .net clr 3.0.30729; .net clr 3.5.30729; rv:11.0) like gecko
火狐瀏覽器
mozilla/5.0 (windows nt 10.0; win64; x64; rv:56.0) gecko/20100101 firefox/56.0
可以看到，區分各個瀏覽器版本的主要是他們的核心，現在主流的瀏覽器的核心有四種，Trident，Gecko，Webkit ，Presto，我把方法改了一下，根據核心來判斷不同的瀏覽器，程式碼如下：
function getExplorer() {
//獲取當前使用的瀏覽器的型號
var explorer = window.navigator.userAgent.toLowerCase() ;
if (explorer.indexOf("applewebkit") >= 0) {
alert("applewebkit核心瀏覽器");
}
else if (explorer.indexOf("trident") >= 0) {
alert("IE瀏覽器");
}
else if (explorer.indexOf("gecko") >= 0) {
alert("gecko核心瀏覽器");
}
}
改進版
分辨出不同的瀏覽器之後，下面開始寫判斷是否安裝OCX外掛的方法，在IE環境下，用海康自帶的方法，其他的瀏覽器用來判斷OCX外掛是否註冊
首先在搜尋框內輸入regedit，開啟登錄檔
找到對應OCX外掛的名字，複製外掛名字
以我本機為例，程式碼如下：
var NewObj;
try {
NewObj = new ActiveXObject("WebVideoKitActiveX.WebVideoKitActiveXCtrl.1");
if (typeof(NewObj) != 'undefined') {
// NewObj = null;
alert("已經註冊");
}
} catch (e) {
// NewObj = null;
alert("尚未註冊");
}
判斷外掛是否安裝
執行，發現還是隻是在IE上可以用這個方法判斷海康外掛是否安裝成功，其他瀏覽器還不能判斷，按F12，找到報錯的地方，try{}catch{}，程式碼如下：
try{
WebVideoCtrl.I_InitPlugin(b.videowidth,b.videoheight, {
iWndowType: sziWndowType,
cbSelWnd: function (xmlDoc) {
g_iWndIndex = $(xmlDoc).find("SelectWnd").eq(0).text();
}
});
WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");
} catch(err) {
alert("沒有註冊");
} finally {
}
丟擲異常
問題解決