Silverlight是跨浏览器，跨客户平台的浏览器插件，可以应用在Windows，Linux，Mac等平台。作为浏览器插件，Silverlight可以像Flash一样，很方便的嵌套在HTML页面中，下面我来介绍一下，如何添加Silverlight应用到HTML页面。

1. 首先，我们来看看VS2008自动生成的代码，新建一个Silverlight应用项目，Html_SilverlightChina，创建的时候选中将Silverlight项目分布到Web项目中。

2. 创建项目后，在Web项目中，会自动生成测试文档页面，分别是Html_SilverlightChinaTestPage.aspx和Html_SilverlightChinaTestPage.html，由于本文是讲述如何添加Silverlight应用到HTML，所以，我们将集中讲述Html_SilverlightChinaTestPage.html页面代码。

HTML代码

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2 <htmlxmlns="http://www.w3.org/1999/xhtml">3 4 <head>5 <title>Html_SilverlightChina</title>6 <styletype="text/css">7 html, body{8 height:100%;9 overflow:auto;10 }11 body{12 padding:0;13 margin:0;14 }15 #silverlightControlHost{16 height:100%;17 text-align:center;18 }19 </style>20 <scripttype="text/javascript"src="Silverlight.js"></script>21 <scripttype="text/javascript">22 functiononSilverlightError(sender, args) {23 varappSource="";24 if(sender!=null&&sender!=0) {25 appSource=sender.getHost().Source;26 }27 28 varerrorType=args.ErrorType;29 variErrorCode=args.ErrorCode;30 31 if(errorType=="ImageError"||errorType=="MediaError") {32 return;33 }34 35 varerrMsg="Unhandled Error in Silverlight Application"+appSource+"/n";36 37 errMsg+="Code:"+iErrorCode+"/n";38 errMsg+="Category:"+errorType+"/n";39 errMsg+="Message:"+args.ErrorMessage+"/n";40 41 if(errorType=="ParserError") {42 errMsg+="File:"+args.xamlFile+"/n";43 errMsg+="Line:"+args.lineNumber+"/n";44 errMsg+="Position:"+args.charPosition+"/n";45 }46 elseif(errorType=="RuntimeError") {47 if(args.lineNumber!=0) {48 errMsg+="Line:"+args.lineNumber+"/n";49 errMsg+="Position:"+args.charPosition+"/n";50 }51 errMsg+="MethodName:"+args.methodName+"/n";52 }53 54 thrownewError(errMsg);55 }56 </script>57 </head>58 <body>59 <formid="form1"runat="server"style="height:100%">60 <divid="silverlightControlHost">61 <objectdata="data:application/x-silverlight-2,"type="application/x-silverlight-2"width="100%"height="100%">62 <paramname="source"value="ClientBin/Html_SilverlightChina.xap"/>63 <paramname="onError"value="onSilverlightError"/>64 <paramname="background"value="white"/>65 <paramname="minRuntimeVersion"value="3.0.40818.0"/>66 <paramname="autoUpgrade"value="true"/>67 <ahref="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40818.0"style="text-decoration:none">68 <imgsrc="http://go.microsoft.com/fwlink/?LinkId=108181"alt="Get Microsoft Silverlight"style="border-style:none"/>69 </a>70 </object><iframeid="_sl_historyFrame"style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>71 </form>72 </body>73 </html>

3. 在上面的HTML代码中，主要代码分为三部分，第一部分是样式表CSS代码，第二部分是Javascript脚本代码，第三部分是HTML Body代码。

对于CSS样式代码，这里不再赘述。我们来分析一下Javascript代码和HTML Body代码。首先说说Javascript脚本代码，在Javascript脚本中，有一个onSilverlightError函数，该函数的功能是处理Silverlight应用外部异常错误信息的。例如，如果浏览器无法下载XAP文件，该错误信息会由onSilverlightError函数处理，将会在浏览器中弹出报错窗口，出现报错时，Silverlight应用将停止运行。onSilverlightError函数作为默认的外部错误信息处理函数，在Silverlight中是这样调用的：

<paramname="onError"value="onSilverlightError"/>

而通过Javascript中的

thrownewError(errMsg);

传递错误信息到浏览器。 当然，开发人员可以根据需求自定义错误处理函数，或者修改错误处理函数。例如，修改errMessage为errorLocation.InnerHTML,错误信息显示也会不同。

4. <Object>标签是调用Silverlight的主要标签，该标签中包含了很多属性标签，其中关键的属性是"type"，该标签标识了该Silverlight应用所需要的Silverlight版本。在本应用中，我建立的是Silverlight 3应用，type="application/x-silverlight-2"，该标签和Silverlight 2 的type标签内容相同，我查看了Silverlight 3 Release Note，微软解释是为了Silverlight2应用升级到Silverlight3兼容性，使用相同标签内容。我看了一下Silverlight beta 2版本的标签，是type="application/x-silverlight-2-b2"。

1 <objectdata="data:application/x-silverlight-2,"type="application/x-silverlight-2"width="100%"height="100%">2 <paramname="source"value="ClientBin/Html_SilverlightChina.xap"/>3 <paramname="onError"value="onSilverlightError"/>4 <paramname="background"value="white"/>5 <paramname="minRuntimeVersion"value="3.0.40818.0"/>6 <paramname="autoUpgrade"value="true"/>7 <ahref="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40818.0"style="text-decoration:none">8 <imgsrc="http://go.microsoft.com/fwlink/?LinkId=108181"alt="Get Microsoft Silverlight"style="border-style:none"/>9 </a>10 </object>

在<Object>标签中，<param>标签定义了Silverlight实例参数。其中"source"是比较重要的一个参数，标识XAP文件的位置。有些时候，根据项目需要，也可以将source留为空，然后在XAML中使用Javascript代码进行调用。

对于Object的参数，我想使用一个表格来列述：

参数

介绍

AutoUpgrade

允许开发人员控制终端用户的Silverlight是否自动升级。默认为True

Background

设置应用背景颜色，默认为Null

enableFramerateCounter

是否在浏览器状态栏显示当前帧速率，默认为false

enableHtmlAccess

是否允许访问浏览器DOM，默认为false，如果为true，将允许Silverlight访问网页

iniParams

初始化参数信息，通过该参数可以从网页传递参数到Silverlight应用中，在Silverlight中可以通过后台代码获取参数（非常有用）

minRuntimeVersion

运行该应用的最低Silverlight版本，在本例中，最低版本是Silverlight 3.0.40818.0

maxFramerate

设置最大的帧速率，默认是每秒60帧

onLoad

可以在本事件中调用自定义Javascript函数

splashScreenSource

设置一个xaml文件作为下载XAP的时候，动画开始页面

Source

XAP路径

5. 在<Object>中有一段代码是这样的：

<ahref="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40818.0"style="text-decoration:none"><imgsrc="http://go.microsoft.com/fwlink/?LinkId=108181"alt="Get Microsoft Silverlight"style="border-style:none"/></a>

这段代码是检测如果浏览器没有安装Silverlight客户端插件，会显示"Get Silverlight"的图片，提示用户下载并安装Silverlight客户端。有的国内的开发人员认为每次到微软网站下载速度太慢，可以修改"http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40818.0"链接,让用户到本地或者指定连接下载Silverlight客户端插件。

我们来完成上面的项目，添加简单代码，完成演示，

我上传了一个XAP文件到cnblogs，下面我使用以下代码调用即可。

代码

1 <objectdata="data:application/x-silverlight-2,"type="application/x-silverlight-2"width="100%"height="100%">2 <paramname="source"value="/jv9/Html_SilverlightChina.xap"/>3 <paramname="onError"value="onSilverlightError"/>4 <paramname="background"value="white"/>5 <paramname="minRuntimeVersion"value="3.0.40818.0"/>6 <paramname="autoUpgrade"value="true"/>7 <ahref="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40818.0"style="text-decoration:none">8 <imgsrc="http://go.microsoft.com/fwlink/?LinkId=108181"alt="Get Microsoft Silverlight"style="border-style:none"/>9 </a>10 </object>

本文为原创文章，首发银光中国网（SilverlightChina.Net)

在线演示： http://www.silverlightchina.net/html/tips/2009/1224/470.html

转载于:https://www.cnblogs.com/springside6/archive/2009/12/26/2525263.html

添加Silverlight应用到HTML相关推荐

  1. SharePoint 2013 中如何使用Silverlight

    1.打开VS,创建一个Silverlight程序,如下图: 2.配置选择默认的,当然也可以不勾选Host Application,如下图: 3.添加Silverlight控件,2个label和1个bu ...

  2. Flex/Silverlight的技术比较转

    基于个人的使用经验,我从语言.框架.开发环境和运行环境四个方面对Flex和Silverlight这两门技术做一个比较,自己认为这个比较还是比较全面的.(这样的比较有意义吗?个人意见,只要别把自己当成宗 ...

  3. 轻松创建Silverlight 4开发环境

    在银光中国网有一篇"轻松创建Silverlight开发环境"文章,相信帮助了不少Silverlight新手,不过该文章介绍的是Silverlight 3开发环境,本篇将基于上文进行 ...

  4. 分享Silverlight/WPF/Windows Phone一周学习导读(10月16日-10月22日)

    分享Silverlight/WPF/Windows Phone一周学习导读(10月16日-10月22日) 本周Silverlight学习资源更新 Silverlight:分包下载及SEO优化方案 菩提 ...

  5. Flex/Silverlight的技术比较

    Flex/Silverlight的技术比较 别人博客上看见的,一文下去,引起口水大战,其实仁者见仁,智者见智,每种语言都不可能是完善的,扬长避短才是王道. 基于个人的使用经验,我从语言.框架.开发环境 ...

  6. SharePoint2010整合Silverlight 4应用——Bing地图控件

    本文中我们将展示如何在SharePoint 2010中集成Silverlight应用.例子中会用到Bing Map 控件.完成后的效果图如下: 开发环境 本例中,我们使用到的开发环境包括: 1.Vis ...

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

    我们在使用Visual Studio IDE创建Silverlight工程时,默认情况下都会自动生成一个用于调试和预览Silverlight的Web工程,该工程包含了html和aspx页面,以及Sil ...

  8. Silverlight Expression[转]

    *这篇文章基于 Silverlight 的预发布版.文中包含的所有信息均有变更可能. 本文讨论: Silverlight 和 XAML 简介 构建简单的 Silverlight 应用程序 在服务器上动 ...

  9. silverlight(一.安装和新建项目)

    1.下载安装silverlight:Microsoft® Silverlight™ 3 Tools (安装之前需要升级VS2008到SP1) 2.和多数人一样我的程序新建好运行调试报错,提示" ...

最新文章

  1. python个人博客搭建说明书_技术分享｜利用Python Django一步步搭建个人博客（二）...
  2. python xpath语法-Python爬虫 | 解析库Xpath的使用
  3. 1.cocos2dx 3.2环境搭建
  4. C语言入门题-计算到任意日期的总天数
  5. 面试题: 数据库 真实面试题已看1 操作语句 存储过程 挺好 sql语句练习 有用
  6. 在 Ubuntu 上安装 .NET SDK 或 .NET 运行时
  7. 年龄是计数还是计量_电子皮带秤是静态称重还是动态称重？
  8. [论文阅读] Shallow Attention Network for Polyp Segmentation
  9. [设计模式] 15 解释器模式 Interpreter
  10. public 函数_C++:11友元函数、友元类
  11. Unity Hub和Unity安装教程
  12. CentOS之命令方式安装向日葵与内网穿透
  13. 计算机操作系统（一）——计算机操作系统的概念
  14. 使用BeautifulSoup爬取百度图片
  15. 数字时钟——FPGA
  16. 心不隔离｜愿春早来，花枝春满
  17. CCF-CSP认证 第一题水题-小明摘苹果(c++满分代码)
  18. 【Mybatis学习路线】day02mybatis的增删改查操作
  19. 惠州学院计算机学院院长,惠州学院计算机科学与工程学院院领导一行来我院参观交流...
  20. 为什么你们说好的程序在我的海思开发板上就是不行呢，难道真的是人品有问题

热门文章

  1. Oracle回退不小心drop掉得表
  2. 【kudu】未解决 Flink 读取 kudu KuduReaderIterator not found it may have expired
  3. 【clickhouse】如何处理ClickHouse超时问题
  4. 【Elasticsearch】用Elasticsearch和Raspberry Pi构建一个真实世界的警报
  5. 【Elasticsearch】es shard split 使用分析
  6. 【Elasticsearch】如何使用minimum_should_match
  7. 95-140-130-源码-transform-算子coGroup
  8. java instant获取微秒转成日期格式_Java8新特性时间日期库DateTime API及示例
  9. linux mem cache,Linux内存：MemTotal、MemFree、MemAvailable三者区别
  10. Solr 新增、更新、删除索引