Silverlight與HTML雙向交互

作者: Leon Weng 來源: 博客園發布時間: 2010-12-21 16:18 閱讀: 1817 次推薦: 2 原文鏈接 [收藏]

摘要：HTML和Silverlight之間的雙向交互可以更靈活的使用Silverlight進行開發，上午摸索了一下，記錄在此。

　　Silverlight具備很好的用戶體驗，但有時需要在頁面的布局上進行特殊處理，比如作為webpart集成到Sharepoint中等等。

　　HTML和Silverlight之間的雙向交互可以更靈活的使用Silverlight進行開發，上午摸索了一下，記錄在此。

　　一，向Silverlight傳遞數據，實現個性化加載

　　Silverlight在HTML中的引用是：

　　這種引用插件的方式提供了一系列的參數來實現個性加載，上面的代碼中我們加了一行參數

　　我們可以在Silverlight中處理這些參數，打開Silverlight應用程序的App代碼文件，加上接收參數的代碼

private void Application_Startup(object sender, StartupEventArgs e)
        {
            if (e.InitParams.Count != 0)
            {
                foreach(var item in e.InitParams)
                {
                    this.Resources.Add(item.Key, item.Value);
                }
            }
            this.RootVisual = new MainPage();
        }

　　我們看到對e.InitParams的處理，即可得到了HTML中傳進來的參數，實現個性化加載：

if(App.Current.Resources["CategoryId"]!=null)
            {
                int cateId = int.Parse(App.Current.Resources["CategoryId"].ToString());
                CategoryItem c = new CategoryItem();
                c.CategoryID = cateId;
                this.gridOfList.Children.Add(c);
            }

　　二，Silverlight調用HTML中的腳本資源，實現自身的樣式等修改

首先我們可以在加載Silverlight組件的頁面上編寫一段Javascript腳本

function InvokePlayer(videoId) {
            document.getElementById("divCategory").style.display = "none";
            var player = document.getElementById("divPlayer");
            player.style.width = "100%";
            player.style.height = "600px";
}

　　怎么在Silverlight中調用這個腳本呢?我們可以在某個事件中調用Silverlight提供的類方法

System.Windows.Browser.HtmlPage.Window.Invoke("InvokePlayer", videoId);

　　當然類似的方法還有幾個：

(HtmlPage.Window.GetProperty("InvokePlayer") as ScriptObject)InvokeSelf("Good Function!");HtmlPage.Window.Eval("document.getElementById('result')") as HtmlElement…

　　即可實現調用腳本。經過以上的兩個方法即可實現HTML和Silverlight之間雙向傳遞數據的功能。