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 相关文章推荐
YUI 读码日记之 YAHOO.util.Dom - Part.1
Mar 22 Javascript
面向对象的Javascript之一(初识Javascript)
Jan 20 Javascript
javascript+HTML5自定义元素播放焦点图动画
Feb 21 Javascript
js style.display=block显示布局错乱问题的解决方法
Sep 21 Javascript
jQuery实现圣诞节礼物动画案例解析
Dec 25 Javascript
Node.js中.pfx后缀文件的处理方法
Mar 10 Javascript
javascript 玩转Date对象(实例讲解)
Jul 11 Javascript
ES6学习教程之Map的常用方法总结
Aug 03 Javascript
vue 实现 rem 布局或vw 布局的方法
Nov 13 Javascript
Vue环境搭建+VSCode+Win10的详细教程
Aug 19 Javascript
Jquery $.map使用方法实例详解
Sep 01 jQuery
vue form表单post请求结合Servlet实现文件上传功能
Jan 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
You might like
yii上传文件或图片实例
2014/04/01 PHP
PHP 二维数组和三维数组的过滤
2016/03/16 PHP
php结合mysql与mysqli扩展处理事务的方法
2016/06/29 PHP
Centos 6.5系统下编译安装PHP 7.0.13的方法
2016/12/19 PHP
浅谈ThinkPHP5.0版本和ThinkPHP3.2版本的区别
2017/06/17 PHP
PDO操作MySQL的基础教程(推荐)
2017/08/18 PHP
使用Zookeeper分布式部署PHP应用程序
2019/03/15 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
jscript之List Excel Color Values
2007/06/13 Javascript
JQuery打造PHP的AJAX表单提交实例
2009/11/03 Javascript
Javascript 中文字符串处理额外注意事项
2009/11/15 Javascript
Extjs4 类的定义和扩展实例
2013/06/28 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
2013/12/27 Javascript
购物车选中得到价格实现示例
2014/01/26 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
2015/05/04 Javascript
JS实现漂亮的淡蓝色滑动门效果代码
2015/09/23 Javascript
vue+element实现批量删除功能的示例
2018/02/28 Javascript
过滤器vue.filters的使用方法实现
2019/09/18 Javascript
JS实现选项卡插件的两种写法(jQuery和class)
2020/12/30 jQuery
Python中pillow知识点学习
2018/04/30 Python
解决python中遇到字典里key值为None的情况,取不出来的问题
2018/10/17 Python
PyCharm搭建Spark开发环境实现第一个pyspark程序
2019/06/13 Python
tensorflow实现在函数中用tf.Print输出中间值
2020/01/21 Python
Windows下实现将Pascal VOC转化为TFRecords
2020/02/17 Python
详解CSS中iconfont的使用
2015/08/04 HTML / CSS
详解移动端Html5页面中1px边框的几种解决方法
2018/07/24 HTML / CSS
Belvilla德国:在线预订度假屋
2018/04/10 全球购物
Android interview questions
2016/12/25 面试题
公司培训心得体会
2014/01/03 职场文书
高中生物教学反思
2014/02/05 职场文书
工伤赔偿协议书
2014/04/15 职场文书
电子商务优秀毕业生求职信
2014/07/11 职场文书
2014年办公室个人工作总结
2014/11/12 职场文书
如何用python识别滑块验证码中的缺口
2021/04/01 Python
深入详解JS函数的柯里化
2021/06/09 Javascript
Python实现8种常用抽样方法
2021/06/27 Python