Silverlight之Silverlight和HTML(DOM,JS)交互 (转载)

简介: Silverlight虽然是以插件形式来显示的,但是它和JS以及HTML的交互还是很方便的,下面一一道来 Silverlight得到浏览器的信息:BrowserInformation b = HtmlPage.

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的交互就到这里吧,希望大家指出错误的地方。

相关文章
|
1月前
|
开发框架 JavaScript 前端开发
揭秘:如何让你的asp.net页面变身交互魔术师——先施展JavaScript咒语,再引发服务器端魔法!
【8月更文挑战第16天】在ASP.NET开发中,处理客户端与服务器交互时,常需先执行客户端验证再提交数据。传统上使用ASP.NET Button控件直接触发服务器事件,但难以插入客户端逻辑。本文对比此法与改进方案:利用HTML按钮及JavaScript手动控制表单提交。后者通过`onclick`事件调用JavaScript函数`SubmitForm()`来检查输入并决定是否提交,增强了灵活性和用户体验,同时确保了服务器端逻辑的执行。
35 5
|
8天前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
6天前
|
缓存 JavaScript 前端开发
js和html代码一定要分离吗
JavaScript(JS)和HTML代码的分离虽非绝对必要,但通常被推荐
|
6天前
|
JavaScript 前端开发 UED
让 HTML 向 Vue.js 华丽转身:如何把 `wangEditor` 仿腾讯文档项目整合进 Vue.js
让 HTML 向 Vue.js 华丽转身:如何把 `wangEditor` 仿腾讯文档项目整合进 Vue.js
|
17天前
|
JavaScript 前端开发
JavaScript 与 DOM 交互
【9月更文挑战第01天】
18 2
|
19天前
|
JavaScript 前端开发 UED
Vue.js动画魔法:解锁流畅过渡,让每一次交互都成为用户心中的小确幸!
【8月更文挑战第30天】在Vue.js中,动画与过渡效果不仅是视觉点缀,更是提升用户体验的关键。通过流畅的动态效果,应用的互动性和吸引力得以增强,从而提高用户满意度和参与度。`&lt;transition&gt;`和`&lt;transition-group&gt;`组件结合CSS过渡,可轻松实现元素的进入、离开及列表变化动画。合理的性能优化,如使用硬件加速,能避免页面卡顿,确保动画既美观又高效。下面是一个简单的淡入淡出效果示例,展示了如何利用Vue.js实现平滑的动画过渡。总之,恰当的动画设计能显著提升应用的用户体验。
31 0
Vue.js动画魔法:解锁流畅过渡,让每一次交互都成为用户心中的小确幸!
|
23天前
|
编解码 JavaScript 前端开发
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
39 1
|
27天前
|
JSON JavaScript 前端开发
JS的无限可能: 前端 精妙DOM技巧至Node.js的服务端
JS的无限可能: 前端 精妙DOM技巧至Node.js的服务端
|
27天前
|
XML JavaScript 测试技术
Web自动化测试框架(基础篇)--HTML页面元素和DOM对象
本文为Web自动化测试入门指南,介绍了HTML页面元素和DOM对象的基础知识,以及如何使用Python中的Selenium WebDriver进行元素定位、操作和等待机制,旨在帮助初学者理解Web自动化测试中的关键概念和操作技巧。
34 1
|
17天前
|
Devops 持续交付 测试技术
JSF遇上DevOps:开发流程将迎巨变?一篇文章带你领略高效协同的魅力!
【8月更文挑战第31天】本文探讨了如何在JavaServer Faces(JSF)开发中融入DevOps文化,通过持续集成与部署、自动化测试、监控与日志记录及反馈机制,提升软件交付速度与质量。文中详细介绍了使用Jenkins进行自动化部署、JUnit与Selenium进行自动化测试、ELK Stack进行日志监控的具体方法,并强调了持续改进的重要性。
27 0