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>