zoukankan      html  css  js  c++  java
  • Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式

      我们在使用Visual Studio IDE创建Silverlight工程时,默认情况下都会自动生成一个用于调试和预览Silverlight的Web工程,该工程包含了html和aspx页面,以及Silverlight.js脚本文件。默认情况下,生成的页面代码可能与下面的代码类似:

    <!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;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插件会显示一张默认的图片用来告知用户升级插件,并弹出一个提示框,如下图:

    2010-6-28 16-10-24

    2010-6-28 16-10-53

      个人觉得这种用户体验并非很好,试想,如果当前页面上有多个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,
                {  
    "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;  0; border: 0px'></iframe>
    </div>

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

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

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

  • 相关阅读:
    hdu--4487--dp
    gitLab重新配置ssh
    图片在DIV中垂直居中的显示方法
    Git教程学习 -- 第六篇 标签管理
    Git教程学习 -- 第五篇 Bug分支
    Git教程学习 --第四篇 分支管理
    Git 教程学习--第三篇
    Git 教程学习--第二篇
    Git 教程学习--第一篇
    动态修改title标题
  • 原文地址:https://www.cnblogs.com/jaxu/p/1766804.html
Copyright © 2011-2022 走看看