首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式

Posted in Javascript onJune 28, 2010

默认情况下，生成的页面代码可能与下面的代码类似： 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>IRERTranscript</title> 
<style type="text/css"> 
html, body { 
height: 100%; 
overflow: auto; 
} 
body { 
padding: 0; 
margin: 0; 
} 
#silverlightControlHost { 
height: 100%; 
text-align:center; 
} 
</style> 
<script type="text/javascript" src="Silverlight.js"></script> 
<script type="text/javascript"> 
function onSilverlightError(sender, args) { 
var appSource = ""; 
if (sender != null && sender != 0) { 
appSource = sender.getHost().Source; 
} 
var errorType = args.ErrorType; 
var iErrorCode = args.ErrorCode; 
if (errorType == "ImageError" || errorType == "MediaError") { 
return; 
} 
var errMsg = "Unhandled Error in Silverlight Application " + appSource + "\n" ; 
errMsg += "Code: "+ iErrorCode + " \n"; 
errMsg += "Category: " + errorType + " \n"; 
errMsg += "Message: " + args.ErrorMessage + " \n"; 
if (errorType == "ParserError") { 
errMsg += "File: " + args.xamlFile + " \n"; 
errMsg += "Line: " + args.lineNumber + " \n"; 
errMsg += "Position: " + args.charPosition + " \n"; 
} 
else if (errorType == "RuntimeError") { 
if (args.lineNumber != 0) { 
errMsg += "Line: " + args.lineNumber + " \n"; 
errMsg += "Position: " + args.charPosition + " \n"; 
} 
errMsg += "MethodName: " + args.methodName + " \n"; 
} 
throw new Error(errMsg); 
} 
</script> 
</head> 
<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/example.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="Get Microsoft Silverlight" style="border-style:none"/> 
</a> 
</object><iframe id="slExample" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div> 
</form> 
</body> 
</html>

我们可以给object对象传递不同的参数，如xap包的加载地址，onLoad或onError事件句柄，背景色，最小版本号支持等等，完整的参数信息读者可以参考Silverlight 3中param参数列表汇总。object对象中一般会包含一段<a>标记，是用来显示当客户端浏览器未安装Silverlight插件时要显示的内容的，我们可以自定义其中的内容，如： 

<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%"> 
<param name="source" value="ClientBin/example.xap"/> 
<param name="onError" value="onSilverlightError" /> 
<param name="background" value="white" /> 
<param name="minRuntimeVersion" value="4.0.50401.0" /> 
<param name="autoUpgrade" value="true" /> 
<img src="/images/NonSilverlight.jpg" style="border-style: none" usemap="#NonSilverlight" /> 
<map name="NonSilverlight" id="NonSilverlight"> 
<area shape="RECT" coords="154,87,362,183" title="Get Microsoft Silverlight" href="http://www.microsoft.com/silverlight/resources/install.aspx" target="_blank" /> 
</map> 
</object>

当客户端浏览器未安装Silverlight插件时，程序会在相应的区域显示一张带有热区的图片，热区指向的位置是Microsoft提供的Silverlight安装地址。理论上，你可以指定任何的自定义代码来显示nonSilverlight的效果，但是Silverlight默认没有提供低版本Silverlight情况下要显示的效果，也就是lowSilverlight的情况。
Silverlight可以自动实现向前兼容，也就是在低版本下编译的Silverlight包可以在高版本下运行，相反，在高版本下编译的Silverlight包不能再低版本下运行，此时Silverlight插件会显示一张默认的图片用来告知用户升级插件，并弹出一个提示框，如下图：

Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式

 

Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式

 

个人觉得这种用户体验并非很好，试想，如果当前页面上有多个Silverlight插件，岂不是要弹出多个提示框吗？那么如何来解决这个问题呢？事实上，我们除了直接在页面上添加object标记来呈现Silverlight外，还可以通过javascript脚本来动态添加Silverlight。Silverlight.js脚本为我们提供了一系列可用的方法，详细内容大家可以参考下msdn http://msdn.microsoft.com/zh-cn/library/cc838126(v=VS.95).aspx#isinstalled

以及如何通过脚本在页面上添加Silverlight，http://msdn.microsoft.com/zh-cn/library/cc265155(v=VS.95).aspx

msdn上给出了非常详细的例子来告诉我们如何使用这些脚本方法，有一点需要注意，使用Silverlight.js文件时一定要与当前Silverlight版本相一致，否则可能会有脚本错误，对应的Silverlight.js文件可以在微软的站点上下载，你会发现其实有很多个可用的版本，其中还包括支持调试的版本哦。

createObject方法参数在使用的时候有几个问题需要注意下：

1. 参数按顺序指定，如果有不需要传递的参数可用null代替。

2. parent element参数必须指定，也就是object标记的父元素，可直接将元素的id当做对象传入，但是在Firefox中不支持，此时可以使用document.getElementById('elementId')语句代替该参数即可。

3. param列表通过数组传递，参数名称与在object标记中使用的名称保持一致即可。

4. 事件列表如果没有对应的页面脚本则传null值，否则会报脚本错误。

5. 最后一个参数context如果不需要可以省去，不用传null或空值。

你应该注意到了，在使用createObject方法时我们可以顺便给Silverlight指定nonSilverlight效果，这个是通过param列表中的altHtml参数来指定的，实施上，我们在页面上直接使用object标记呈现Silverlight时也可以使用alt属性来指定nonSilverlight效果，这个与在object标记中直接插入html代码的效果相同。
通过使用createObject方法，我们完全可以自定义lowSilverlight效果了，下面是一个例子： 

<div id="divSilverlightContent"> 
<script type="text/javascript"> 
if (Silverlight.isInstalled("4.0.50303.0")){ 
Silverlight.createObject("ClientBin/SilverlightApplication1.xap", 
document.getElementById('divSilverlightContent'), 
null, 
{ width: "532px", height: "380px", background: "white", version:"4.0.50303.0", windowless:"true" }, 
null, 
"param1=value1,param2=value2"); 
} 
else { 
document.write('<img src="images/NonSilverlight.jpg" style="border-style: none" usemap="#SLMap3D_NonSilverlight" />' 
+ '<map name="NonSilverlight" id="NonSilverlight">' 
+ '<area shape="RECT" coords="154,87,362,183" title="Get Microsoft Silverlight" href="http://www.microsoft.com/silverlight/resources/install.aspx" target="_blank" />' 
+ '</map>'); 
} 
</script> 
<iframe style='visibility: hidden; height: 0; width: 0; border: 0px'></iframe> 
</div>

使用Silverlight.isInstalled()方法可以判断客户端浏览器是否已经安装了指定版本的Silverlight插件，如果已经安装了，则使用Silverlight.createObject方法创建Silverlight对象，否则输出自定义的内容。

这里还有一篇文章个人觉得很有用，给大家分享下吧！

http://www.itstrike.cn/Question/Use-JavaScript-to-create-Silverlight-Object-createObject

Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript生成/解析dom的CDATA类型的字段的代码
Apr 22 Javascript
突发奇想的一个jquery插件
Nov 19 Javascript
JS面向对象编程浅析
Aug 28 Javascript
在jQuery中 常用的选择器介绍
Apr 16 Javascript
JS中的二叉树遍历详解
Mar 18 Javascript
jQuery动态添加
Apr 07 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
May 24 Javascript
javascript弹出带文字信息的提示框效果
Jul 19 Javascript
认识less和webstrom的less配置方法
Aug 02 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
Aug 10 Javascript
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
Oct 25 Javascript
Vue实现购物小球抛物线的方法实例
Nov 22 Vue.js
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
Jun 28 #Javascript
js getElementsByTagName的简写方式
Jun 27 #Javascript
两种简单实现菜单高亮显示的JS类代码
Jun 27 #Javascript
用apply让javascript函数仅执行一次的代码
Jun 27 #Javascript
验证javascript中Object和Function的关系的三段简单代码
Jun 27 #Javascript
jQuery选择头像并实时显示的代码
Jun 27 #Javascript
Javascript匿名函数的一种应用 代码封装
Jun 27 #Javascript
电子管(5) 修复(2) 接收机(2) 车机(1) TECSUN(1) 德生(17) 矿石收音机(1) 海燕B411(1) 放大器(1) DSP(2)
You might like
队列在编程中的实际应用(php)
2010/09/04 PHP
自己在做项目过程中学到的PHP知识收集
2012/08/20 PHP
php调用新浪短链接API的方法
2014/11/08 PHP
PHP面向对象多态性实现方法简单示例
2017/09/27 PHP
JavaScript变量的作用域全解析
2015/08/14 Javascript
使用javaScript动态加载Js文件和Css文件
2015/10/24 Javascript
简述JavaScript提交表单的方式 （Using JavaScript Submit Form）
2016/03/18 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
2016/06/21 Javascript
JavaScript触发onScroll事件的函数节流详解
2016/12/14 Javascript
详解关于react-redux中的connect用法介绍及原理解析
2017/09/11 Javascript
JavaScript插件Tab选项卡效果
2017/11/14 Javascript
vue 添加vux的代码讲解
2017/11/30 Javascript
实现单层json按照key字母顺序排序的示例
2017/12/06 Javascript
微信小程序实现验证码获取倒计时效果
2018/02/08 Javascript
JS实现点击按钮可实现编辑功能
2018/07/03 Javascript
Vue页面刷新记住页面状态的实现
2019/12/27 Javascript
使用Webpack 搭建 Vue3 开发环境过程详解
2020/07/28 Javascript
vue中实现点击变成全屏的多种方法
2020/09/27 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
2020/10/26 Javascript
Python实现的视频播放器功能完整示例
2018/02/01 Python
Python日期时间模块datetime详解与Python 日期时间的比较,计算实例代码
2018/09/14 Python
Django安装配置mysql的方法步骤
2018/10/15 Python
对Python发送带header的http请求方法详解
2019/01/02 Python
PyTorch中Tensor的维度变换实现
2019/08/18 Python
python使用gdal对shp读取,新建和更新的实例
2020/03/10 Python
python实现贪吃蛇游戏源码
2020/03/21 Python
Python通过yagmail实现发送邮件代码解析
2020/10/27 Python
css3实现一个div设置多张背景图片及background-image属性实例演示
2017/08/10 HTML / CSS
HTML5 解决苹果手机不能自动播放音乐问题
2017/12/27 HTML / CSS
乡镇网格化管理实施方案
2014/03/23 职场文书
关爱留守儿童倡议书
2014/04/15 职场文书
好好学习保证书
2015/02/26 职场文书
毕业论文指导老师意见
2015/06/04 职场文书
2015年物业公司保洁工作总结
2015/10/22 职场文书
咖啡厅里的创业计划书
2019/08/21 职场文书
Python编程编写完善的命令行工具
2021/09/15 Python