Silverlight 訪問Javascript對象

在Silverlight中對Javascript的操作，主要用到System.Windows.Browser.HtmlPage.Window中提供的相關方法。

在HTML頁面中有如下Javascript代碼：

<script type="text/javascript">
    function GetBP(id) {
        //根據id通過ajax獲取數據，省略。
        var bp = { "BH": "0102007009", "Name": "Ⅱ－7高邊坡", "X": 118.2039630, "Y": 30.0837440 };
        return bp;
    }
</script>

Silverlight中，通過System.Windows.Browser.HtmlPage.Window.Eval(string code)方法可以執行Javascript代碼並獲取其返回值（object），將返回值轉換為System.Windows.Browser.ScriptObject，再通過GetProperty即可獲得相應的值：

object obj = System.Windows.Browser.HtmlPage.Window.Eval(string.Format("GetBP('{0}');", id));
string ret = string.Format("編號：{0}n名稱：{1}n經度：{2}n緯度：{3}",
    ((System.Windows.Browser.ScriptObject)obj).GetProperty("BH"),
    ((System.Windows.Browser.ScriptObject)obj).GetProperty("Name"),
    ((System.Windows.Browser.ScriptObject)obj).GetProperty("X"),
    ((System.Windows.Browser.ScriptObject)obj).GetProperty("Y"));
System.Windows.Browser.HtmlPage.Window.Alert(ret);

結果如下圖所示：

如果Javascript代碼返回的是簡單的對象（字符串、數字等），則直接ToString()即可，如下：

object obj = System.Windows.Browser.HtmlPage.Window.Eval(string.Format("GetBP('{0}').Name;", id));
string Name = obj.ToString();
System.Windows.Browser.HtmlPage.Window.Alert("名稱：" + Name);

 

 

 

在 JavaScript 語法中使用了 silverlightObject 占位符。您可以通過對大多數 Silverlight 對象調用 GetHost 從 JavaScript API 中獲取對 silverlightObject 對象的引用。此外，您還可以調用 Document.GetElementByID 並指定實例化 Silverlight 插件的 object 元素的 ID，從而從 DOM 中獲取 silverlightObject 實例。

Silverlight.js 語法基於 Silverlight.js 函數，截至本文檔發布之日，這些函數是最新的。Silverlight.js 庫可能已由 Microsoft 更新。在這種情況下，語法可能會發生更改，包括參數名稱和參數順序。

Silverlight 調用 javaScript
主要使用 HtmlPage.Window 這個對象

xaml.cs  private void button1_Click(object sender, RoutedEventArgs e)
        {
            //使用Invoke
            HtmlPage.Window.Invoke("calljs", "Invoke");
        }

 

        private void button2_Click(object sender, RoutedEventArgs e)
        {
            //創建腳本對象
            ScriptObject calljs =
                (ScriptObject)HtmlPage.Window.GetProperty("calljs");
            //使用InvokeSelf
            calljs.InvokeSelf("InvokeSelf");
        }

 

        private void LayoutRoot_Loaded(object sender, RoutedEventArgs e)
        {
            //JavaScript腳本
            string jsText = @"function calljs(msg){
                        alert(msg);
                    }";
            //創建腳本片段
            HtmlElement element = HtmlPage.Document.CreateElement("Script");
            element.SetAttribute("type", "text/javascript");
            element.SetProperty("text", jsText);
            //添加腳本到Html頁面中
            HtmlPage.Document.Body.AppendChild(element);
        }

 

 

聲明創建javaScript  對象的調用方式

private void LayoutRoot_Loaded(object sender, RoutedEventArgs e)
        {
            //JavaScript腳本
            string jsText = @"
                jsObject = function(msg)
                {
                    this.Msg = msg;
                }
                jsObject.prototype.Show = function()
                {
                    alert(this.Msg);
                }";

 

           //創建腳本對象
            HtmlElement element =  HtmlPage.Document.CreateElement("Script");
            element.SetAttribute("type", "text/javascript");
            element.SetProperty("text", jsText);
            //添加JavaScript到Html頁面
            HtmlPage.Document.Body.AppendChild(element);
        }

 

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            //使用CreateInstance獲取JavaScript對象
            ScriptObject script =  HtmlPage.Window.CreateInstance("jsObject" , textBox1.Text);
            script.Invoke("Show");
        }

 

使用 HtmlWindow 的 Eval 方法

直接寫入javascript 的文本，通過

HtmlPage.Window.Eval(textBox1.Text);來運行這個命令，比如textBox1.Text = “alert('歡迎！')”

 

javaScript 調用  Silverlight
  在xaml.cs 中先要初始化定義好可以被訪問的對象和方法

 

      public javascript5()
        {
            InitializeComponent();
            //注冊JavaScript的訪問對象
            HtmlPage.RegisterScriptableObject("Builder", this);
        }

 

        //定義CreateRect為腳本成員
        [ScriptableMember]
        public void CreateRect(int width, int height)
        {
            //創建一個矩形對象
            Rectangle rect = new Rectangle();
            rect.Width = width;
            rect.Height = height;
            rect.Fill = new SolidColorBrush(Colors.Blue);
            LayoutRoot.Children.Clear();
            LayoutRoot.Children.Add(rect);
        }

 

然後在js的部分就可以調用了

<script type="text/javascript">
        function createRectangle() {
            //根據object的id來獲取Silverlight對象
            var xamlobj = document.all('XamlObject');
            //調用Silverlight中的CreateRect方法
            xamlobj.content.Builder.CreateRect(
            document.all('txtWidth').value
            ,document.all('txtHeight').value);
        }
    </script>