SilverLight自動安裝
摘要：Flash可以實現自動安裝，SilverLight在客戶端沒有安裝時會提示微軟提供的默認樣式信息，作者寫這篇文章來自定義了一把。
1、 準備js，參考了一個js彈出層的例子。最后自動輸出exe，類似flash安裝。ie可以自動安裝，其他瀏覽器需要手動下載安裝包。
var isOK = Silverlight.isInstalled("4.0.50524.0");
if (!isOK) {
var msgw, msgh, bordercolor;
msgw = 450; //提示窗口的寬度
msgh = 150; //提示窗口的高度
titleheight = 25 //提示窗口標題高度
bordercolor = "#336699"; //提示窗口的邊框顏色
titlecolor = "#99CCFF"; //提示窗口的標題顏色
var sWidth, sHeight;
sWidth = document.body.offsetWidth; //瀏覽器工作區域內頁面寬度
sHeight = screen.height; //屏幕高度（垂直分辨率）
//背景層（大小與窗口有效區域相同，即當彈出對話框時，背景顯示為放射狀透明灰色）
var bgObj = document.createElement("div"); //創建一個div對象（背景層）
//定義div屬性，即相當于
//<div id="bgDiv" style="position:absolute; top:0; background-color:#777; filter:progid:DXImagesTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75); opacity:0.6; left:0; width:918px; height:768px; z-index:10000;"></div>
bgObj.setAttribute('id', 'bgDiv');
bgObj.style.position = "absolute";
bgObj.style.top = "0";
bgObj.style.background = "#777";
bgObj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=2,opacity=25,finishOpacity=75";
bgObj.style.opacity = "0.6";
bgObj.style.left = "0";
bgObj.style.width = sWidth + "px";
bgObj.style.height = sHeight * 2 + "px";
bgObj.style.zIndex = "10000";
document.body.appendChild(bgObj); //在body內添加該div對象
var msgObj = document.createElement("div")//創建一個div對象（提示框層）
//定義div屬性，即相當于
//<div id="msgDiv" align="center" style="background-color:white; border:1px solid #336699; position:absolute; left:50%; top:50%; font:12px/1.6em Verdana,Geneva,Arial,Helvetica,sans-serif; margin-left:-225px; margin-top:npx; width:400px; height:100px; text-align:center; line-height:25px; z-index:100001;"></div>
msgObj.setAttribute("id", "msgDiv");
msgObj.setAttribute("align", "center");
msgObj.style.background = "white";
msgObj.style.border = "1px solid " + bordercolor;
msgObj.style.position = "absolute";
msgObj.style.left = "50%";
msgObj.style.top = "20%";
msgObj.style.font = "12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
msgObj.style.marginLeft = "-225px";
msgObj.style.marginTop = -75 + document.documentElement.scrollTop + "px";
msgObj.style.width = msgw + "px";
msgObj.style.height = msgh + "px";
msgObj.style.padding = "0px";
msgObj.style.textAlign = "center";
msgObj.style.lineHeight = "25px";
msgObj.style.zIndex = "10001";
var title = document.createElement("h4"); //創建一個h4對象（提示框標題欄）
//定義h4的屬性，即相當于
//<h4 id="msgTitle" align="right" style="margin:0; padding:3px; background-color:#336699; filter:progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100); opacity:0.75; border:1px solid #336699; height:18px; font:12px Verdana,Geneva,Arial,Helvetica,sans-serif; color:white; cursor:pointer;" onclick="">關閉</h4>
title.setAttribute("id", "msgTitle");
title.setAttribute("align", "right");
title.style.margin = "0";
title.style.padding = "3px";
title.style.background = bordercolor;
title.style.filter = "progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
title.style.opacity = "0.75";
title.style.border = "1px solid " + bordercolor;
title.style.height = "18px";
title.style.font = "12px Verdana, Geneva, Arial, Helvetica, sans-serif";
title.style.color = "white";
title.style.cursor = "pointer";
title.innerHTML = "關閉";
function removeObj() {//點擊標題欄觸發的事件
document.body.removeChild(bgObj); //刪除背景層Div
document.getElementById("msgDiv").removeChild(title); //刪除提示框的標題欄
document.body.removeChild(msgObj); //刪除提示框層
}
title.onclick = removeObj;
document.body.appendChild(msgObj); //在body內添加提示框div對象msgObj
document.getElementById("msgDiv").appendChild(title); //在提示框div中添加標題欄對象title
var dv = document.createElement("div");
dv.setAttribute("id", "slInstall");
dv.setAttribute("style", "font-family:Arial; font-size:14px; ");
dv.innerHTML = "<br />安裝Microsoft Silverlight后，才能正常瀏覽該頁面。<br /><span id=\"msgSpan\">系統正在下載或者安裝此程序。或者 <a href=\"\" id=\"downLink\">點擊此處</a> 手動安裝。</span><br />安裝完成后請重新啟動瀏覽器。";
document.getElementById("msgDiv").appendChild(dv); //在提示框div中添加提示信息對象txt
//輸出exe
var downHost = "改為你的地址 例如http://192.168.23.22:8008/download/";
var osInfo = window.navigator.userAgent;
var exeName = "";
if (osInfo.indexOf("Windows NT") >= 0) exeName = "Silverlight4forwindows.exe";
else if (osInfo.indexOf("PPC Mac OS X") >= 0) exeName = "Silverlight4formac.dmg";
else if (osInfo.indexOf("Intel Mac OS X") >= 0) exeName = "Silverlight4formac.dmg";
document.getElementById("downLink").href = downHost + exeName;
/*判斷瀏覽器*/
if (osInfo.indexOf("MSIE") == -1) {
document.getElementById("msgSpan").innerHTML = "您的瀏覽器不支持自動安裝Silverlight，請 <a href=\"\" style=\"text-decoration:underline\" id=\"downLink\">點擊此處</a> 手動安裝。";
}
else {
//輸出exe安裝包
run_exe = "<OBJECT ID=\"RUNIT\" WIDTH=0 HEIGHT=0 TYPE=\"application/x-oleobject\""
run_exe += "CODEBASE=\"{0}\">"
run_exe += "</OBJECT>"
run_exe = run_exe.replace("{0}", downHost + exeName);
document.open();
document.clear();
document.writeln(run_exe);
document.close();
}
}
if (!isOK) {
var msgw, msgh, bordercolor;
msgw = 450; //提示窗口的寬度
msgh = 150; //提示窗口的高度
titleheight = 25 //提示窗口標題高度
bordercolor = "#336699"; //提示窗口的邊框顏色
titlecolor = "#99CCFF"; //提示窗口的標題顏色
var sWidth, sHeight;
sWidth = document.body.offsetWidth; //瀏覽器工作區域內頁面寬度
sHeight = screen.height; //屏幕高度（垂直分辨率）
//背景層（大小與窗口有效區域相同，即當彈出對話框時，背景顯示為放射狀透明灰色）
var bgObj = document.createElement("div"); //創建一個div對象（背景層）
//定義div屬性，即相當于
//<div id="bgDiv" style="position:absolute; top:0; background-color:#777; filter:progid:DXImagesTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75); opacity:0.6; left:0; width:918px; height:768px; z-index:10000;"></div>
bgObj.setAttribute('id', 'bgDiv');
bgObj.style.position = "absolute";
bgObj.style.top = "0";
bgObj.style.background = "#777";
bgObj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=2,opacity=25,finishOpacity=75";
bgObj.style.opacity = "0.6";
bgObj.style.left = "0";
bgObj.style.width = sWidth + "px";
bgObj.style.height = sHeight * 2 + "px";
bgObj.style.zIndex = "10000";
document.body.appendChild(bgObj); //在body內添加該div對象
var msgObj = document.createElement("div")//創建一個div對象（提示框層）
//定義div屬性，即相當于
//<div id="msgDiv" align="center" style="background-color:white; border:1px solid #336699; position:absolute; left:50%; top:50%; font:12px/1.6em Verdana,Geneva,Arial,Helvetica,sans-serif; margin-left:-225px; margin-top:npx; width:400px; height:100px; text-align:center; line-height:25px; z-index:100001;"></div>
msgObj.setAttribute("id", "msgDiv");
msgObj.setAttribute("align", "center");
msgObj.style.background = "white";
msgObj.style.border = "1px solid " + bordercolor;
msgObj.style.position = "absolute";
msgObj.style.left = "50%";
msgObj.style.top = "20%";
msgObj.style.font = "12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
msgObj.style.marginLeft = "-225px";
msgObj.style.marginTop = -75 + document.documentElement.scrollTop + "px";
msgObj.style.width = msgw + "px";
msgObj.style.height = msgh + "px";
msgObj.style.padding = "0px";
msgObj.style.textAlign = "center";
msgObj.style.lineHeight = "25px";
msgObj.style.zIndex = "10001";
var title = document.createElement("h4"); //創建一個h4對象（提示框標題欄）
//定義h4的屬性，即相當于
//<h4 id="msgTitle" align="right" style="margin:0; padding:3px; background-color:#336699; filter:progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100); opacity:0.75; border:1px solid #336699; height:18px; font:12px Verdana,Geneva,Arial,Helvetica,sans-serif; color:white; cursor:pointer;" onclick="">關閉</h4>
title.setAttribute("id", "msgTitle");
title.setAttribute("align", "right");
title.style.margin = "0";
title.style.padding = "3px";
title.style.background = bordercolor;
title.style.filter = "progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
title.style.opacity = "0.75";
title.style.border = "1px solid " + bordercolor;
title.style.height = "18px";
title.style.font = "12px Verdana, Geneva, Arial, Helvetica, sans-serif";
title.style.color = "white";
title.style.cursor = "pointer";
title.innerHTML = "關閉";
function removeObj() {//點擊標題欄觸發的事件
document.body.removeChild(bgObj); //刪除背景層Div
document.getElementById("msgDiv").removeChild(title); //刪除提示框的標題欄
document.body.removeChild(msgObj); //刪除提示框層
}
title.onclick = removeObj;
document.body.appendChild(msgObj); //在body內添加提示框div對象msgObj
document.getElementById("msgDiv").appendChild(title); //在提示框div中添加標題欄對象title
var dv = document.createElement("div");
dv.setAttribute("id", "slInstall");
dv.setAttribute("style", "font-family:Arial; font-size:14px; ");
dv.innerHTML = "<br />安裝Microsoft Silverlight后，才能正常瀏覽該頁面。<br /><span id=\"msgSpan\">系統正在下載或者安裝此程序。或者 <a href=\"\" id=\"downLink\">點擊此處</a> 手動安裝。</span><br />安裝完成后請重新啟動瀏覽器。";
document.getElementById("msgDiv").appendChild(dv); //在提示框div中添加提示信息對象txt
//輸出exe
var downHost = "改為你的地址 例如http://192.168.23.22:8008/download/";
var osInfo = window.navigator.userAgent;
var exeName = "";
if (osInfo.indexOf("Windows NT") >= 0) exeName = "Silverlight4forwindows.exe";
else if (osInfo.indexOf("PPC Mac OS X") >= 0) exeName = "Silverlight4formac.dmg";
else if (osInfo.indexOf("Intel Mac OS X") >= 0) exeName = "Silverlight4formac.dmg";
document.getElementById("downLink").href = downHost + exeName;
/*判斷瀏覽器*/
if (osInfo.indexOf("MSIE") == -1) {
document.getElementById("msgSpan").innerHTML = "您的瀏覽器不支持自動安裝Silverlight，請 <a href=\"\" style=\"text-decoration:underline\" id=\"downLink\">點擊此處</a> 手動安裝。";
}
else {
//輸出exe安裝包
run_exe = "<OBJECT ID=\"RUNIT\" WIDTH=0 HEIGHT=0 TYPE=\"application/x-oleobject\""
run_exe += "CODEBASE=\"{0}\">"
run_exe += "</OBJECT>"
run_exe = run_exe.replace("{0}", downHost + exeName);
document.open();
document.clear();
document.writeln(run_exe);
document.close();
}
}
2、在html里面調用該js，將silverlightfor window的安裝文件和silverlightformac的安裝文件放到根目錄，命名為js中寫的名字（Silverlight4forwindows.exe，Silverlight4formac.dmg）。
<body>
<form id="form1" runat="server" style="height:100%">
<div id="silverlightControlHost">
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
<param name="source" value="ClientBin/AutoInstallSilverlight.xap"/>
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="4.0.50401.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration:none">
<img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="獲取 Microsoft Silverlight" style="border-style:none"/>
</a>
</object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
</form>
<script language="javascript" src="autoInstall.js"></script>
</body>
<form id="form1" runat="server" style="height:100%">
<div id="silverlightControlHost">
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
<param name="source" value="ClientBin/AutoInstallSilverlight.xap"/>
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="4.0.50401.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration:none">
<img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="獲取 Microsoft Silverlight" style="border-style:none"/>
</a>
</object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
</form>
<script language="javascript" src="autoInstall.js"></script>
</body>
3、預覽效果。
4、可以調整的地方，刪除這一句，就可以去掉微軟的安裝提示。
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration:none">
<img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="獲取 Microsoft Silverlight" style="border-style:none"/>
</a>
<img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="獲取 Microsoft Silverlight" style="border-style:none"/>
</a>
源碼：http://files.cnblogs.com/xiaokang088/AutoInstallSilverlightWebSite.rar
全站熱搜
留言列表
