为了账号安全，请及时绑定邮箱和手机立即绑定
首页 手记 Silverlight：分包下载及SEO优化方案

Silverlight：分包下载及SEO优化方案

标签：
前端工具

一、按模块分包

一般大型的Silverlight应用，都会按模块分解成多个silverlight project，编译后就有多个xap包，然后在需要用到的场景按需加载。我近期开发的这个项目不需要全站Silverlight，而是aspx混合silverlight，说得更白点，就是把相应的子模块xap包嵌入aspx.


这样分包就简单多了：直接用js控制dom元素，修改object元素中的source，动态设置成不同的xap即可实现无刷新的加载不同模块。（这比网上主流的方式：用WebClient动态下载xap包，最终再反射加载，个人觉得更简单。当然，这种方式不适用于整站Silverlight的项目）

二、按需反射加载xap中的页面

上面讨论的办法，只是解决了按需加载不同的xap文件，但是如果一个xap中有多个页面，如何确定加载某个xap后，显示其中的哪个页面呢？


答案：参数传入+反射


silvelright以object标签嵌入html时，可以指定一些传入参数，类似下面这样：

1
2
3
4
5
6
7
8
9
10
11
12
13
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2"
            width="100%" height="100%">
            <param name="source" value="ClientBin/Basic.xap" />
            <param name="onError" value="onSilverlightError" />
            <param name="background" value="white" />
            <param name="minRuntimeVersion" value="4.0.50826.0" />
            <param name="autoUpgrade" value="true" />
            <param name="initParams" value="page=Basic.City" />
            <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration: none">
                <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight"
                    style="border-style: none" />
            </a>
        </object>

注意其中的<param name="initParams" value="page=Basic.City"/>这表明我们想让City页面在加载成功后显示。

那么，SL中如何接受这个参数呢？看下面的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
private void Application_Startup(object sender, StartupEventArgs e)
{
    //检测有无传入参数
    if (e.InitParams != null && e.InitParams.ContainsKey("page"))
    {
        string _pageName = e.InitParams["page"];
        //根据page参数，动态反射加载相应的实例
        Assembly asm = this.GetType().Assembly;
        UserControl _page = asm.CreateInstance(_pageName) as UserControl;
        this.RootVisual  = _page;
    }
    else
    {
        //如果没有参数传入，则显示默认页面
        this.RootVisual = new Airport();
    }
}

三、SEO优化

这是RIA应用经常会遇到的一个问题，前面提到的处理方法并未涉及这一块，默认情况下：xap模块的动态加载，以及根据参数动态反射加载不同页面，都不会改变浏览器的地址,所以搜索引擎会始终认为这是一个页面，最终也只能收录一个网址。


为了对搜索引擎更友好，可以在地址栏的#部分做些手脚，最终要到达的效果：


如果动态加载Basic.xap模块，且显示该模块中的City页面时，我们可以让地址栏类似: http://localhost:1223/Default.aspx#Basic|Basic.City

切换到User.xap模块(即用户管理模块)，且显示该模块中的User页面时，我们可以让地址栏类似：http://localhost:1223/Default.aspx#User|User.User

这样，虽然都是同一个default.aspx页面，但是搜索引擎却认为这是二个不同的url，会搜录二个地址。


default.aspx完整代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<%@ Page Language="c#" AutoEventWireup="true" %>
 
<!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 runat="server">
    <title>Silverlight SEO优化及分包下载</title>
    <style type="text/css">
        html, body
        {
            height: 100%;
            overflow: auto;
            font-size:12px;
        }
        body
        {
            padding: 0;
            margin: 0;
        }
        #silverlightControlHost
        {
            height: 100%;
            text-align: center;
        }
        #nav
        {
            line-height:30px;
            text-align: center;
            background: #efefef;
            padding: 5px;
        }
        #nav a
        {
            padding: 0px 10px;
             
        }
    </style>
    <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="Silverlight.js"></script>
    <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery-1.6.4.min.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);
        }
 
 
        //加载Silverlight
        function loadSilverlight(url) {
            if (url.indexOf("#") == -1) {return;}
            var _param = url.split('#')[1];          
            var _sl = document.getElementById("sl");
            var _xap = _param.split('|')[0] + ".xap";
            var _page = _param.split('|')[1];           
            _sl.innerHTML = "<object data='data:application/x-silverlight-2,' type='application/x-silverlight-2' width='100%' height='100%'><param name='source' value='ClientBin/" + _xap + "' /><param name='onError' value='onSilverlightError' /><param name='background' value='white' /><param name='minRuntimeVersion' value='4.0.50826.0' /><param name='autoUpgrade' value='true' /><param name='initParams' value='page=" + _page + "' /><a href='http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0' style='text-decoration: none'><img src='http://go.microsoft.com/fwlink/?LinkId=161376' alt='Get Microsoft Silverlight' style='border-style: none' /></a></object>";
        }
 
 
        $().ready(function () {           
            loadSilverlight(window.location.href);
        })
    </script>
</head>
<body>
    <form id="form1" runat="server" style="height: 100%">
    <div id="silverlightControlHost">
        <div id="nav">
        Silvelight分包以及SEO示例 (by 菩提树下的杨过 http://yjmyzz.cnblogs.com/)：<br/>
            <a href="#Basic|Basic.City" onclick="loadSilverlight(this.href)">城市管理</a> | <a href="#Basic|Basic.Airport" onclick="loadSilverlight(this.href)">航站管理</a> |
            <a href="#User|User.User" onclick="loadSilverlight(this.href)">用户管理</a> | <a href="#User|User.Organization" onclick="loadSilverlight(this.href)">组织机构管理</a>
        </div>
        <div id="sl">
        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2"
            width="100%" height="100%">
            <param name="source" value="ClientBin/Basic.xap" />
            <param name="onError" value="onSilverlightError" />
            <param name="background" value="white" />
            <param name="minRuntimeVersion" value="4.0.50826.0" />
            <param name="autoUpgrade" value="true" />
            <param name="initParams" value="page=Basic.City" />
            <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration: none">
                <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight"
                    style="border-style: none" />
            </a>
        </object>
        </div>
        <iframe id="_sl_historyFrame" style="visibility: hidden; height: 0px; width: 0px;
            border: 0px"></iframe>
    </div>
    </form>
</body>
</html>
点击查看更多内容
发表于 2018.04.12 17:19， 共 2238 人浏览

本文原创发布于慕课网 ，转载请注明出处，谢谢合作

举报
为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

作者其他优质文章

正在加载中

一只斗牛犬

手记
篇
粉丝
49
获赞与收藏
300

关注作者，订阅最新文章

相关文章推荐

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习，写下你的评论
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消