浅析Silverlight嵌入HTML的实现方法
创始人
2024-06-08 06:50:54
0

对于Silverlight嵌入HTML的开发方法,在今后的页面开发中比较常见,需要控制的大多是嵌入插件。通过了解Silverlight嵌入HTML,能对大家今后的日常开发有所帮助。

Object元素可以被用于Silverlight插件的HTML嵌入和配置,但是要在浏览器兼容的方式下进行。比较常见的应用有俩种,一个是嵌入Silverlight 插件,并将该应用程序指定给宿主。另一个是指定在未安装Silverlight 时显示的备用HTML。

这些应用对应于 HTML 页的不同部分,尤其是,对应于object 元素的不同配置参数。首先我们来介绍怎样使用每个过程中的代码段。***把他们结合起来,就确保得到了跨浏览器兼容性,并基于 Visual Studio 和 Expression Blend 用来动态生成测试页的模板。

嵌入插件

将object 元素添加到HTML,并指定属性和子param 元素。

  1.  width="300" height="300" 
  2.     data="data:application/x-silverlight-2,"   
  3.     type="application/x-silverlight-2" > 
  4.      name="source" value="SilverlightApplication1.xap"/> 
  5.  

width 和 eight 属性是跨浏览器兼容性所必需的。可以相对于父元素的宽度和高度指定固定像素值或百分比。如果使用相对大小调整,可以通过处理 Content.Resized 事件对插件大小的更改做出响应。

type 属性和显示的特定值也是必需的。此值使用 Silverlight MIME 类型来标识插件和必需的版本。建议使用 data 属性及其值,以避免某些浏览器出现性能问题。请注意数据值的尾随逗号。它表示具有空值的第二个数据参数。名为 source 的 param 元素是必需的,该元素表示应用程序文件的位置和名称。通常在相对于 HTML 文件的位置指定一个 .xap 应用程序包。

指定要在未安装 Silverlight 时显示的备用HTML

向子param元素后的object元素添加HTML内容。

  1.  id="SilverlightPlugin1" width="300" height="300" 
  2.     data="data:application/x-silverlight-2,"   
  3.     type="application/x-silverlight-2" > 
  4.      name="source" value="SilverlightApplication1.xap"/> 
  5.  
  6.      
  7.      href="http://go.microsoft.com/fwlink/?LinkID=149156"   
  8.         style="text-decoration: none;"> 
  9.          src="http://go.microsoft.com/fwlink/?LinkId=108181"   
  10.             alt="Get Microsoft Silverlight"   
  11.             style="border-style: none"/> 
  12.      
  13.  

该示例显示了默认安装映像源和安装程序URI。使用这些URI,服务器可以检测到用户的浏览器设置以提供正确版本的安装映像和安装程序。如果用户的浏览器不受支持,单击映像可使浏览器打开Silverlight Requirements页。

为了将Silverlight安装体验集成到网页中,可以任意提供复杂的备用HTML。不过,在许多情况下,用户必须在安装 Silverlight 后重新启动或刷新浏览器。对于 Internet Explorer 而言,只需要刷新浏览器,除非用户安装的是早期版本的Silverlight 并通过安装链接升级。也可以自动刷新浏览器,或者通过使用Silverlight.js 文件中的帮助器功能取消刷新要求。还可以使用Silverlight.js 执行细化的浏览器要求检测。

下面的代码示例提供了使用整个浏览器窗口的Silverlight 应用程序的完整HTML页。该示例基于当您选择动态生成测试页时Visual Studio 所使用的默认HTML。该示例使用级联样式表 (CSS) 和 div 元素来包含插件。这可以确保插件延伸到浏览器窗口的边缘。此元素和其他附加到HTML 的元素有助于确保跨浏览器兼容。

iframe元素也用于确保跨浏览器兼容性。iframe 的存在可避免 Safari 浏览器缓存页面。当用户向后导航到以前访问过的Silverlight 页面时,Safari 缓存可避免重新加载Silverlight 插件。该示例使用JavaScript 函数处理插件的OnError 事件。JavaScript 错误处理程序在调试过程中很有用,但通常在部署应用程序时将其移除。

本示例还包含minRuntimeVersion 和autoUpgrade 设置以便在未安装指定Silverlight 版本时提供升级体验。若要在Web 浏览器窗口中查看该示例,必须在source 参数中指定有效的 Silverlight 应用程序包。

Silverlight嵌入HTML代码

  1.      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2.   > 
  3.  
  4.  
  5.     </FONT></STRONG>SilverlightApplication1<STRONG><FONT color=#006699> 
  6.  
  7.      type="text/css"> 
  8.     html, body {  
  9.         height: 100%;  
  10.         overflow: auto;  
  11.     }  
  12.     body {  
  13.         padding: 0;  
  14.         margin: 0;  
  15.     }  
  16.     #silverlightControlHost {  
  17.         height: 100%;  
  18.         text-align:center;  
  19.     }  
  20.      
  21.       
  22.      type="text/javascript"> 
  23.         function onSilverlightError(sender, args) {  
  24.             var appSource = "";  
  25.             if (sender != null && sender != 0) {  
  26.                 appSource = sender.getHost().Source;  
  27.             }  
  28.  
  29.             var errorType = args.ErrorType;  
  30.             var iErrorCode = args.ErrorCode;  
  31.  
  32.             if (errorType == "ImageError" ||   
  33.                 errorType == "MediaError") {  
  34.               return;  
  35.             }  
  36.  
  37.             var errMsg = "Unhandled Error in Silverlight Application "   
  38.                 + appSource + "\n";  
  39.  
  40.             errMsg += "Code: " + iErrorCode + "    \n";  
  41.             errMsg += "Category: " + errorType + "       \n";  
  42.             errMsg += "Message: " + args.ErrorMessage + "     \n";  
  43.  
  44.             if (errorType == "ParserError") {  
  45.                 errMsg += "File: " + args.xamlFile + "     \n";  
  46.                 errMsg += "Line: " + args.lineNumber + "     \n";  
  47.                 errMsg += "Position: " + args.charPosition + "     \n";  
  48.             }  
  49.             else if (errorType == "RuntimeError") {  
  50.                 if (args.lineNumber != 0) {  
  51.                     errMsg += "Line: " + args.lineNumber + "     \n";  
  52.                     errMsg += "Position: " + args.charPosition +   
  53.                         "     \n";  
  54.                 }  
  55.                 errMsg += "MethodName: " + args.methodName + "     \n";  
  56.             }  
  57.  
  58.             throw new Error(errMsg);  
  59.         }  
  60.      
  61.  
  62.  
  63.  
  64.      id="silverlightControlHost"> 
  65.          width="100%" height="100%" 
  66.             type="application/x-silverlight-2"   
  67.             data="data:application/x-silverlight-2," > 
  68.              name="source" value="SilverlightApplication1.xap"/> 
  69.              name="onerror" value="onSilverlightError" /> 
  70.              name="background" value="white" /> 
  71.              name="minRuntimeVersion" value="3.0.40620.0" /> 
  72.              name="autoUpgrade" value="true" /> 
  73.              href="http://go.microsoft.com/fwlink/?LinkID=149156"   
  74.                 style="text-decoration: none;"> 
  75.                    
  76.                     src="http://go.microsoft.com/fwlink/?LinkId=108181"   
  77.                     alt="Get Microsoft Silverlight"   
  78.                     style="border-style: none"/> 
  79.              
  80.          
  81.          id="_sl_historyFrame"   
  82.             style='visibility:hidden;height:0px;width:0px;border:0px'> 
  83.          
  84.     
 
  •  
  •  
  • 其实Silverlight程序是以控件的形式嵌入到HTML页面中的,这里是把将要整合的HTML页面利用iframe置于Silverlight控件之上,而不影响Silverlight控件的正常工作。

    结构图

    操作要点:1.编辑按钮的xaml,定义MouseLeftButtonDown,使按下鼠标左键时,触发相应函数。2.在该页面的js文件中,关联按钮。

    代码:

    1. function On_MouseLeftButtonDown(sender,args){   
    2. document.getElementById('iframe').style.visibility = "visible";   
    3. }   
    4. //开启HTML页面,将名为iframe的隐藏层的visibility属性改为visible显示   
    5. function Off_MouseLeftButtonDown(sender,args){   
    6. document.getElementById('iframe').style.visibility = "hidden";   
    7. }   
    8. //关闭HTML页面,将名为iframe的隐藏层的visibility属性改为hidden隐藏 

    3.该项目的html文件。

    代码:

    1.  id="iframe" style="position:absolute; width:640px; height:450px; z-index:1; left: 10px; top: 45px;visibility:hidden">
    2.  scrolling="no" style="position:fixed; width:640px; height:450px;" src="http://www.mdong.org/qdjw" /> 
       
  • // 将iframe嵌入一个div层,并通过调整z-index值与visibility属性将该层置于Silverlight控件层上方并隐藏,以不影响Silverlight程序正常工作。
  • //调整DIV层的位置大小。
  • 也可以通过修改Silverlight中的isWindowless属性为TRUE,然后利用

    来进行覆盖。当然,还是以Silverlight来实现的方案比较***,不过,***的例子也不失为一种快速的解决方案。

    【编辑推荐】

    1. Office 2010将使用Silverlight改善用户体验
    2. 微软.NET平台主管谈Silverlight企业级开发
    3. Flash与Silverlight多领域实测对比
    4. 微软宣称Silverlight装机量超过三亿
    5. 图解Silverlight 3的7个新功能

    相关内容

    热门资讯

    如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下,MySQL服务器仅侦听来自localhos...
    如何利用交换机和端口设置来管理... 在网络管理中,总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
    施耐德电气数据中心整体解决方案... 近日,全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”,作为该活动的...
    20个非常棒的扁平设计免费资源 Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...
    德国电信门户网站可实时显示全球... 德国电信周三推出一个门户网站,直观地实时提供其安装在全球各地的传感器网络检测到的网络攻击状况。该网站...
    为啥国人偏爱 Mybatis,... 关于 SQL 和 ORM 的争论,永远都不会终止,我也一直在思考这个问题。昨天又跟群里的小伙伴进行...
    《非诚勿扰》红人闫凤娇被曝厕所... 【51CTO.com 综合消息360安全专家提醒说,“闫凤娇”、“非诚勿扰”已经被黑客盯上成为了“木...
    2012年第四季度互联网状况报... [[71653]]  北京时间4月25日消息,据国外媒体报道,全球知名的云平台公司Akamai Te...