Silverlight与HTML集成方法-技术开发专区

Silverlight与HTML集成方法

作者：IT168技术频道整理编辑：胡铭娅 2009-09-28 07:00 来源：IT168�

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

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

　　嵌入插件

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

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

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

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

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

　　该示例显示了默认安装映像源和安装程序 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 应用程序包。

　　代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html  >

<head>
    <title>SilverlightApplication1</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">
        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>
    <div id="silverlightControlHost">
        <object width="100%" height="100%"
            type="application/x-silverlight-2"
            data="data:application/x-silverlight-2," >
            <param name="source" value="SilverlightApplication1.xap"/>
            <param name="onerror" value="onSilverlightError" />
            <param name="background" value="white" />
            <param name="minRuntimeVersion" value="3.0.40620.0" />
            <param name="autoUpgrade" value="true" />
            <a href="http://go.microsoft.com/fwlink/?LinkID=149156"
                style="text-decoration: none;">
                <img
                    src="http://go.microsoft.com/fwlink/?LinkId=108181"
                    alt="Get Microsoft Silverlight"
                    style="border-style: none"/>
            </a>
        </object>
        <iframe id="_sl_historyFrame"
            style='visibility:hidden;height:0px;width:0px;border:0px'>
        </iframe>
    </div>
</body>
</html>

　其实Silverlight程序是以控件的形式嵌入到HTML页面中的，这里是把将要整合的HTML页面利用iframe置于Silverlight控件之上，而不影响Silverlight控件的正常工作。

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

　　代码：

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

　　3.该项目的html文件。

　　代码：

<div id="iframe" style="position：absolute； width：640px； height：450px； z-index：1； left： 10px； top： 45px；visibility：hidden"><iframe scrolling="no" style="position：fixed； width：640px； height：450px；" src="http：//www.mdong.org/qdjw" /> </div>
//将iframe嵌入一个div层，并通过调整z-index值与visibility属性将该层置于Silverlight控件层上方并隐藏，以不影响Silverlight程序正常工作。
//调整DIV层的位置大小。

　　也可以通过修改Silverlight中的isWindowless属性为TRUE，然后利用<dir>来进行覆盖。当然，还是以Silverlight来实现的方案比较完美，不过，最后的例子也不失为一种快速的解决方案。

关注我们