Silverlight 与javaScript互操作

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>

 

示例源自Silverlight 开发实践一书