zoukankan      html  css  js  c++  java
  • Silverlight之Silverlight和HTML(DOM,JS)交互

    Silverlight虽然是以插件形式来显示的,但是它和JS以及HTML的交互还是很方便的,下面一一道来

    Silverlight得到浏览器的信息

    BrowserInformation b = HtmlPage.BrowserInformation;
    lblInfo.Text = "Name: " + b.Name;
    lblInfo.Text += "\nBrowser Version: " + b.BrowserVersion.ToString();
    lblInfo.Text += "\nPlatform: " + b.Platform;
    lblInfo.Text += "\nCookies Enabled: " + b.CookiesEnabled;
    lblInfo.Text += "\nUser Agent: " + b.UserAgent;

    Name,得到浏览器名称

    BrowserVersion得到浏览器版本

    Platform,得到运行平台信息

    CookiesEnabled,得到一个值标识是否启用Cookie

    UserAgent得到当前代理信息


     打开一个窗口,效果等同于window.open:

    HtmlPage.PopupWindow,打开一个窗口,可以指定HtmlPopupWindowOptions参数,

                    HtmlPopupWindowOptions options = new HtmlPopupWindowOptions();
    options.Height = 200;
    options.Width = 200;
    options.Toolbar = false;
    options.Status = false;
    options.Resizeable = false;
    options.Location = false;
    HtmlPage.PopupWindow(new Uri("http://www.baidu.com"), null, options);

    HtmlPopupWindowOptions 可以指定页面的属性,高度、宽度地址栏之类的属性,其实PopupWindow的原理就是调用了js的Window.Open方法.

    切记,PopopWindow只能在事件(触发)中起作用,也就意味着不能一开始就显示,另外其中的Url必须是绝对路径。

    HtmlDocument,表示一个完整的 Html的 Document对象,可以使用HtmlPage.Document得到

    主要属性:

    DocumentUri:得到当前页面的URL地址

    QueryString:得到传递的参数

    DocumentElement:得到HtmlDocument对象

    Body:得到Body节点(HtmlElement类型)

    Cookies:Cookie的支持,很有用

    CreateElement():创建一个HtmlElement节点(一个Html的标签元素)

    AttachEvent():给Html元素附加脚本事件

    DetachEvent():删除脚本事件

    Submit():提交页面,如果Silverlight在aspx页面很有用,可以执行服务器代码

    操作HtmlElement:

    AppendChild():追加HtmlElement对象

    RemoveChild():移除HtmlElement

    Focus():使HtmlElement元素获得焦点

    GetAttribute(),
    SetAttribute(), and
    RemoveAttribute(): 得到或者设置或移除HtmlElement的属性(本身Html DOM 存在的,不是自己指定的)

    GetStyleAttribute(),
    SetStyleAttribute(),
    RemoveStyleAttribute():得到或者设置或移除HtmlElement的样式属性

    GetProperty() and
    SetProperty():得到或者设置HtmlElement的属性(自己添加的或者是作为了HtmlElement的一部分的属性比如 innerHTML)

    AttachEvent() and
    DetachEvent():附加和移除JS脚本事件

    HTML DOM 的事件:

    onchange 值改变的时候触发

    onclick 单击事件

    onmouseover 鼠标悬浮事件

    onmouseout 鼠标离开事件

    onkeydown  键盘按下事件

    onkeyup      键盘放开事件

    onselect      当Select被选择时候

    onfocus      获得焦点

    onblur        失去焦点

    onabort      用户去掉图片下载

    onerror       发生错误时候

    onload         页面加载事件

    onunload     页面关闭(或者通过超链跳转,新页面显示之前执行)

    在Silverlight调用JS方法的:

    第一种调用方法:

    现有JS函数如下:

            function changeParagraph(newText) {
    var element = document.getElementById("ptest");
    element.innerHTML = newText;
    }

    使用ScriptObject对象实现调用,通过HtmlPage.Window.GetProperty("changeParagraph")得到Object对象,其中的参数就是JS方法的名称

    然后使用ScriptObject调用InvokeSelf方法,参数就是JS方法的参数(如果有参数就传递,否则就不传递)

     ScriptObject script = (ScriptObject)HtmlPage.Window.GetProperty("changeParagraph");
    script.InvokeSelf("Changed through JavaScript");


    第二种方法:

    现有JS函数如下:

    这个JS方法使用了对象的方式,并且还赋予了属性为一个Function

      myHello = function(message)
    {
    this.Message = message;
    }

    myHello.prototype.Display = function()
    {
    var resultSpan = $get("result");
    resultSpan.innerText = "Hello " + this.Message;
    }

    可以看到获取ScriptObject的方式变化了,因为这个JS使用了对象的方式在使用,同时他的属性prototype有一个Display的属性(一个Function),

    然后使用ScriptObject对象的Invoke方法参数为prototype的属性名称。

    ScriptObject    script=HtmlPage.Window.CreateInstance("myHello",this.input.Text);      
    object result = script.Invoke("Display");//执行这个方法之后既会执行myHello方法也会执行Display方法

    在JS中访问Silverlight中的函数:

     ①脚本化的类必须是 public 的

     ②需要脚本化的属性、方法、事件要标记为 [ScriptableMember]

     ③如果类(XAML页面)被标记为 [ScriptableType],则意味着其属性、方法、事件都是可被访问的

     ④使用HtmlPage.RegisterScriptableObject()或者HtmlPage.RegisterCreateableType()进行注册,

        前者注册一个对象,后者注册一个类型

     ⑤给我们的obejct标签添加一个唯一的ID(在JS中通过这个插件来访问Silverlight注册的函数)


    看看类的代码实现:

    Class Scriptable
    {
    [ScriptableMember]
    public string Hello(string name)
    {
    return string.Format("Hello: {0}", name);
    }
    }

    然后在一个XAML中进行注册:

    //sriptableMemberAttribute实例化要本化的类
    Sriptable s = new Scriptable() { CurrentTime = DateTime.Now };
    //将 Scriptable 对象注册到客户端中,所对应的客户端的对象名为 scriptable
    HtmlPage.RegisterScriptableObject("scriptable", s);

    在JS中访问:

    var slPlugin = $get('Xaml1');
    //其中的scriptable为注册在客户端的脚本化对象的名字
    var obj = document.getElementById("xaml1").content.scriptable;
    //调用脚本化类得方法,其中Hello为类中的方法
    output.innerHTML += obj.Hello("webabcd");



    注册一个XAML页面:

    [ScriptableType()]
    public partial class ScriptableSilverlight: UserControl
    {
    public ScriptableSilverlight()
    {
    InitializeComponent();
    HtmlPage.RegisterScriptableObject("Page", this);
    }
    [ScriptableMember()]
    public void ChangeText(string newText)
    {
    lbl.Text = newText;
    }
    }

    JS中的调用

    function updateSilverlightText()
    {
    var control = document.getElementById("silverlightControl");
    control.content.Page.ChangeText(
    "This TextBlock has been updated through JavaScript.");
    }

    和刚才的方式一摸一样

    上边的例子是使用 HtmlPage.RegisterScriptableObject的方式注册一个对象,接下来使用HtmlPage.RegisterCreateableType注册一个类型

    看看类的代码,一个简单的类和简单的方法:

    [ScriptableType()]
    public class RandomNumbers
    {
    private Random random = new Random();
    [ScriptableMember()]
    public int GetRandomNumberInRange(int from, int to)
    {
    return random.Next(from, to+1);
    }
    }


    在XAML中进行注册:

    第一个参数只是对象的名字称号,第二个就是类型

    HtmlPage.RegisterCreateableType("RandomNumbers", typeof(RandomNumbers));


    在JS中访问这个类中的这个GetRandomNumberInRange方法:

    看到和上边的区别了吧,没错上边是“document.getElementById("xaml1").content.scriptable;”而这里是使用content.services.createObject()方法,

    参数就是在XAML中使用“HtmlPage.RegisterCreateableType”注册的第一个参数,得到一个注册的对象,然后使用对象访问GetRandomNumberInRange

    方法,如果有参数则传递。

    function getRandom1To6()
    {
    var control = document.getElementById("silverlightControl");
    var random = control.content.services.createObject("RandomNumbers");
    alert("Your number is: " + random.GetRandomNumberInRange(1, 6));
    }

    HTML和Silverlight交互的安全性,下边这两个配置可以保护:

    <param name="enableHtmlAccess" value="false" />设置为false之后则无法使用Document, Window, Plugin, BrowserInformation ,但是可以使用HtmlPage.PopupWindow();

    <param name="allowHtmlPopupwindow" value="false" />如果为false,则无法使用HtmlPage.PopupWindow();


    好了,Silverlight和HTML的交互就到这里吧,希望大家指出错误的地方。


  • 相关阅读:
    ModbusTCP_Server之FB的建立
    ModbusTCP_Client之FB的建立
    ModbusRTU_Slave之FB的建立
    ModbusRTU_Master之FB的建立
    外部模式启动程序
    配方Recipes的程序实现过程
    socket通信实现程序
    面试题37:序列化二叉树(C++)
    面试题36:二叉搜索树与双向链表(C++)
    面试题31:栈的压入、弹出序列(C++)
  • 原文地址:https://www.cnblogs.com/ListenFly/p/2269532.html
Copyright © 2011-2022 走看看