AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

稳扎稳打Silverlight(27) - 2.0网页之可脚本化, 与DOM的交互, 与JavaScript的交互

2017-11-07 918
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：


[索引页]

[源码下载]


稳扎稳打Silverlight(27) - 2.0网页之可脚本化, 与DOM的交互, 与JavaScript的交互


作者： webabcd


介绍
Silverlight 2.0 使用c#开发可脚本化的代码，Silverlight与宿主页面的DOM之间的交互，Silverlight与宿主页面的JavaScript之间的交互
    ScriptableMemberAttribute - 需要脚本化的属性、方法、事件要标记为此
    HtmlPage.RegisterScriptableObject - 将可脚本化对象注册到客户端
    HtmlElement -  表示网页的文档对象模型 (DOM) 中的 HTML 元素
    HtmlWindow - 提供 JavaScript 的 window 对象的 Silverlight 端的托管表示形式


在线DEMO
http://webabcd.blog.51cto.com/1787395/342779


示例
1、Silverlight对可脚本化的支持
Scriptable.cs
using System; 
using System.Net; 
using System.Windows; 
using System.Windows.Controls; 
using System.Windows.Documents; 
using System.Windows.Ink; 
using System.Windows.Input; 
using System.Windows.Media; 
using System.Windows.Media.Animation; 
using System.Windows.Shapes; 
 
using System.Windows.Browser; 
 
namespace Silverlight20.WebPage 
{ 
         /* 
         * 脚本化的类必须是 public 的 
         * 需要脚本化的属性、方法、事件要标记为 [ScriptableMember] 
         * 如果类被标记为 [ScriptableType]，则意味着其属性、方法、事件都是ScriptableMemberAttribute 
         */ 
 
         /// <summary> 
         /// 用于演示脚本化的类 
         /// </summary> 
         // [ScriptableType] 
         public  class Scriptable 
        { 
                 /// <summary> 
                 /// 当前服务端的时间 
                 /// </summary> 
                [ScriptableMember] 
                 public DateTime CurrentTime { get; set; } 
 
                 /// <summary> 
                 /// Hello 方法 
                 /// </summary> 
                 /// <param name="name">名字</param> 
                 /// <returns></returns> 
                [ScriptableMember] 
                 public  string Hello( string name) 
                { 
                         return  string.Format( "Hello: {0}", name); 
                } 
                 
                 /// <summary> 
                 /// 开始事件 
                 /// </summary> 
                [ScriptableMember] 
                 public  event EventHandler<StartEventArgs> Start; 
 
                 /// <summary> 
                 /// 触发开始事件所调用的方法 
                 /// </summary> 
                 /// <param name="dt"></param> 
                 public  void OnStart(DateTime dt) 
                { 
                         if (Start !=  null) 
                        { 
                                Start( this,  new StartEventArgs() 
                                { 
                                        CurrentTime = dt 
                                }); 
                        } 
                } 
 
        } 
 
         /// <summary> 
         /// 开始事件的 EventArgs 
         /// </summary> 
         public  class StartEventArgs : EventArgs 
        { 
                 /// <summary> 
                 /// 当前服务端的时间 
                 /// </summary> 
                [ScriptableMember] 
                 public DateTime CurrentTime { get; set; } 
        } 
}
 
ScriptableDemo.xaml.cs
using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Net; 
using System.Windows; 
using System.Windows.Controls; 
using System.Windows.Documents; 
using System.Windows.Input; 
using System.Windows.Media; 
using System.Windows.Media.Animation; 
using System.Windows.Shapes; 
 
using System.Windows.Browser; 
 
namespace Silverlight20.WebPage 
{ 
         public partial  class ScriptableDemo : UserControl 
        { 
                System.Threading.Timer _timer; 
                System.Threading.SynchronizationContext _syncContext; 
 
                 public ScriptableDemo() 
                { 
                        InitializeComponent(); 
 
                         this.Loaded +=  new RoutedEventHandler(ScriptableDemo_Loaded); 
                } 
 
                 void ScriptableDemo_Loaded( object sender, RoutedEventArgs e) 
                { 
                         // UI 线程 
                        _syncContext = System.Threading.SynchronizationContext.Current; 
 
                        Scriptable s =  new Scriptable() { CurrentTime = DateTime.Now }; 
 
                         // 将 Scriptable 对象注册到客户端中，所对应的客户端的对象名为 scriptable 
                        HtmlPage.RegisterScriptableObject( "scriptable", s); 
 
                        _timer =  new System.Threading.Timer(MyTimerCallback, s, 0, 1000); 
                } 
 
                 private  void MyTimerCallback( object state) 
                { 
                        Scriptable s = state  as Scriptable; 
 
                         // 每秒调用一次 UI 线程上的指定的方法 
                        _syncContext.Post(OnStart, s); 
                } 
 
                 void OnStart( object state) 
                { 
                        Scriptable s = state  as Scriptable; 
 
                         // 调用 Scriptable 对象的 OnStart() 方法，以触发 Start 事件 
                        s.OnStart(DateTime.Now); 
                } 
        } 
}
 
ScriptableDemo.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > 
< html  xmlns ="http://www.w3.org/1999/xhtml" > 
< head > 
         < title >Silverlight20 </title> 
         < style  type ="text/css" > 
                html, body 
                { 
                        height: 100%; 
                        overflow: auto; 
                } 
                body 
                { 
                        padding: 0; 
                        margin: 0; 
                } 
                #silverlightControlHost 
                { 
                        height: 100%; 
                } 
         </style> 

         < script  type ="text/javascript"  src ="../Silverlight.js" > </script> 

         < script  type ="text/javascript" > 
                function scriptableDemo() { 

                        // scriptable - Silverlight 注册到客户端的对象 
                        var obj = document.getElementById("xaml1").content.scriptable; 
                        var output = document.getElementById('result'); 

                        output.innerHTML += obj.CurrentTime 
                        output.innerHTML += ' < br  />'; 

                        output.innerHTML += obj.Hello("webabcd"); 
                        output.innerHTML += ' < br  />'; 

                        // obj.Start = responseStart; 
                        // addEventListener - 添加事件监听器 
                        // removeEventListener - 移除事件监听器 
                        obj.addEventListener("Start", responseStart); 
                } 

                function responseStart(sender, args) { 
                        document.getElementById('result').innerHTML += args.CurrentTime; 
                        document.getElementById('result').innerHTML += ' < br  />'; 
                } 
         </script> 

</head> 
< body > 
         < div  style ="font-size: 12px"  id ="result" > 
         </div> 
         < div  style ="font-size: 12px"  onclick ="scriptableDemo();" > 
                加载了 Silverlight20.WebPage.ScriptableDemo 后，单击这里以测试 Silverlight 对可脚本化的支持 </div> 
         < div  id ="silverlightControlHost" > 
                <object id="xaml1" data="data:application/x-silverlight-2," type="application/x-silverlight-2" 
                        width="100%" height="100%"> 
                         < param  name ="source"  value ="../ClientBin/Silverlight20.xap"  /> 
                         < param  name ="EnableHtmlAccess"  value ="true"  /> 
                 </object> 
                 < iframe  style ='visibility: hidden; height: 0; width: 0; border: 0px' > </iframe> 
         </div> 
</body> 
</html>
 
 
2、Silverlight与网页的DOM之间的交互
DOMDemo.xaml
<UserControl x:Class="Silverlight20.WebPage.DOMDemo" 
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> 
        <StackPanel HorizontalAlignment="Left" Margin="5"> 

                <TextBox x:Name="txtMsg" /> 
                 
        </StackPanel> 
</UserControl>
 
DOMDemo.xaml.cs
using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Net; 
using System.Windows; 
using System.Windows.Controls; 
using System.Windows.Documents; 
using System.Windows.Input; 
using System.Windows.Media; 
using System.Windows.Media.Animation; 
using System.Windows.Shapes; 
 
using System.Windows.Browser; 
 
namespace Silverlight20.WebPage 
{ 
         public partial  class DOMDemo : UserControl 
        { 
                 public DOMDemo() 
                { 
                        InitializeComponent(); 
 
                        Demo(); 
                } 
 
                 void Demo() 
                { 
                         // 获取当前页面的 id 为 hello 的DOM，并设置其样式 
                        HtmlElement container = HtmlPage.Document.GetElementById( "hello"); 
                        container.SetStyleAttribute( "display",  "block"); 
 
                         // 创建一个 ul    
                        HtmlElement ul = HtmlPage.Document.CreateElement( "ul"); 
 
                         for ( int i = 0; i < 10; i++) 
                        { 
                                 // 创建一个 li ，并设置其显示的内容 
                                HtmlElement li = HtmlPage.Document.CreateElement( "li"); 
                                li.SetAttribute( "innerText",  "hi: DOM"); 
 
                                 // 将 li 添加到 ul 内 
                                ul.AppendChild(li); 
                        } 
 
                         // 将 ul 添加到 id 为 hello 的 DOM 内 
                        container.AppendChild(ul); 
 
 
                         // 创建一个页面的 button ，并设置其 value 属性和 onclick 事件 
                        HtmlElement button = HtmlPage.Document.CreateElement( "button"); 
                        button.SetProperty( "value",  "hi: Silverlight"); 
                        button.AttachEvent( "onclick",  new EventHandler<HtmlEventArgs>(HelloClick)); 
 
                         // 将 button 添加到 id 为 hello 的 DOM 内 
                        container.AppendChild(button); 
                } 
 
                 void HelloClick( object sender, HtmlEventArgs e) 
                { 
                         // 页面的 button 单击后所需执行的逻辑 
                        txtMsg.Text +=  "hi: Silverlight\r\n"; 
                } 
        } 
}
 
DOMDemo.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > 
< html  xmlns ="http://www.w3.org/1999/xhtml" > 
< head > 
         < title >Silverlight20 </title> 
         < style  type ="text/css" > 
                html, body 
                { 
                        height: 100%; 
                        overflow: auto; 
                } 
                body 
                { 
                        padding: 0; 
                        margin: 0; 
                } 
                #silverlightControlHost 
                { 
                        height: 100%; 
                } 
         </style> 

         < script  type ="text/javascript"  src ="../Silverlight.js" > </script> 

</head> 
< body > 
         <! --由 Silverlight 控制此 id 为 hello 的 DOM-- > 
         < div  style ="font-size: 12px; display: none"  id ="hello" > 
         </div> 
         < div  style ="font-size: 12px" > 
                加载 Silverlight20.WebPage.DOMDemo 后，测试 Silverlight 和页面 DOM 的交互 </div> 
         < div  id ="silverlightControlHost" > 
                <object id="xaml1" data="data:application/x-silverlight-2," type="application/x-silverlight-2" 
                        width="100%" height="100%"> 
                         < param  name ="source"  value ="../ClientBin/Silverlight20.xap"  /> 
                         < param  name ="EnableHtmlAccess"  value ="true"  /> 
                 </object> 
                 < iframe  style ='visibility: hidden; height: 0; width: 0; border: 0px' > </iframe> 
         </div> 
</body> 
</html> 
 
 
3、Silverlight与网页的JavaScript之间的交互
JSDemo.xaml
<UserControl x:Class="Silverlight20.WebPage.JSDemo" 
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> 
        <StackPanel HorizontalAlignment="Left" Margin="5"> 

                <Button Margin="5" x:Name="invokeJS" Content="调用JavaScript" Click="invokeJS_Click" /> 
                 
                <TextBox Margin="5" x:Name="txtMsg" /> 

        </StackPanel> 
</UserControl>
 
JSDemo.xaml.cs
using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Net; 
using System.Windows; 
using System.Windows.Controls; 
using System.Windows.Documents; 
using System.Windows.Input; 
using System.Windows.Media; 
using System.Windows.Media.Animation; 
using System.Windows.Shapes; 
 
using System.Windows.Browser; 
 
namespace Silverlight20.WebPage 
{ 
         public partial  class JSDemo : UserControl 
        { 
                 public JSDemo() 
                { 
                        InitializeComponent(); 
 
                         this.Loaded +=  new RoutedEventHandler(JSDemo_Loaded); 
                } 
 
                 private  void invokeJS_Click( object sender, RoutedEventArgs e) 
                { 
                         // 调用页面的 JavaScript 方法 
                        HtmlPage.Window.Invoke( "silverlightInvokeJS",  "webabcd"); 
 
                         // 执行任意 JavaScript 语句 
                        HtmlPage.Window.Eval( "silverlightInvokeJS('webabcd2')"); 
                } 
 
                 void JSDemo_Loaded( object sender, RoutedEventArgs e) 
                { 
                        HtmlPage.Document.GetElementById( "btnHello").SetStyleAttribute( "display",  "inline"); 
 
                         // 将此对象注册到客户端中，所对应的客户端的对象名为 silverlightObject 
                        HtmlPage.RegisterScriptableObject( "silverlightObject",  this); 
                } 
 
                 /// <summary> 
                 /// Hello 方法 
                 /// 暴露给页面的方法，调用后在 Silverlight 中显示结果 
                 /// </summary> 
                 /// <param name="name">名字</param> 
                [ScriptableMember]  // 脚本化此方法 
                 public  void hello( string name) 
                { 
                        txtMsg.Text +=  string.Format( "Hello: {0}\r\n", name); 
                } 
        } 
}
 
JSDemo.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > 
< html  xmlns ="http://www.w3.org/1999/xhtml" > 
< head > 
         < title >Silverlight20 </title> 
         < style  type ="text/css" > 
                html, body 
                { 
                        height: 100%; 
                        overflow: auto; 
                } 
                body 
                { 
                        padding: 0; 
                        margin: 0; 
                } 
                #silverlightControlHost 
                { 
                        height: 100%; 
                } 
         </style> 

         < script  type ="text/javascript"  src ="../Silverlight.js" > </script> 

         < script  type ="text/javascript" > 
                function silverlightInvokeJS(name) { 
                        // Silverlight 调用 JavaScript 方法，在页面上显示结果 
                        document.getElementById('result').innerHTML += "hello: " + name + " < br  />"; 
                } 

                function jsInvokeSilverlight(name) { 
                        // JavaScript 调用 Silverlight 方法，在 Silverlight 上显示结果 
                        var obj = document.getElementById("xaml1").content.silverlightObject; 
                        obj.hello(name); 
                } 
         </script> 

</head> 
< body > 
         < div  style ="font-size: 12px"  id ="result" > 
         </div> 
         < div  style ="font-size: 12px" > 
                加载 Silverlight20.WebPage.JSDemo 后，测试 Silverlight 和页面 JavaScript 的交互   
                <input type="button" id="btnHello" value="HelloSilverlight" 
                        style="display: none" /> 
         </div> 
         < div  id ="silverlightControlHost" > 
                <object id="xaml1" data="data:application/x-silverlight-2," type="application/x-silverlight-2" 
                        width="100%" height="100%"> 
                         < param  name ="source"  value ="../ClientBin/Silverlight20.xap"  /> 
                         < param  name ="EnableHtmlAccess"  value ="true"  /> 
                 </object> 
                 < iframe  style ='visibility: hidden; height: 0; width: 0; border: 0px' > </iframe> 
         </div> 
</body> 
</html>
 
 
 


     本文转自webabcd 51CTO博客，原文链接：http://blog.51cto.com/webabcd/343915 ，如需转载请自行联系原作者
文章标签：
JavaScript
前端开发
C#
容器
索引
移动开发
关键词：
JavaScript DOM
JavaScript网页
JavaScript交互
JavaScript脚本
网页JavaScript
技术小胖子
目录
相关文章
光明顶阳顶天
|
18天前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染，了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略，可以提高网页的性能和用户体验，确保页面能够快速、流畅地呈现给用户。在实际开发中，要根据具体情况进行权衡和调整，以达到最佳的效果。
光明顶阳顶天
28 1
Star时光
|
23天前
|
存储 JavaScript 前端开发
使用JavaScript构建动态交互式网页：从基础到实践
【10月更文挑战第12天】使用JavaScript构建动态交互式网页：从基础到实践
Star时光
61 1
我是快乐的嘟嘟
|
4天前
|
JavaScript 前端开发 索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具，通过它们可以动态地改变页面的内容、样式和行为，为用户提供丰富的交互体验。
我是快乐的嘟嘟
64 49
大树营养快线
|
5天前
|
JavaScript 前端开发 开发者
.js的dom元素操作
【10月更文挑战第29天】通过灵活运用这些 DOM 元素操作方法，JavaScript 可以实现丰富的网页交互效果，如动态更新页面内容、响应用户操作、创建和删除页面元素等。在实际开发中，开发者可以根据具体的需求和场景，选择合适的 DOM 元素操作方法来实现所需的功能，为用户提供更加流畅和动态的网页体验。
大树营养快线
28 4
土木林森
|
5天前
|
设计模式 前端开发 JavaScript
揭秘！前端大牛们如何巧妙利用JavaScript，打造智能交互体验！
【10月更文挑战第30天】前端开发领域充满了无限可能与创意，JavaScript作为核心语言，凭借强大的功能和灵活性，成为打造智能交互体验的重要工具。本文介绍前端大牛如何利用JavaScript实现平滑滚动、复杂动画、实时数据更新和智能表单验证等效果，展示了JavaScript的多样性和强大能力。
土木林森
18 4
疯狂的猿
|
4天前
|
JavaScript
js实现简洁实用的网页计算器功能源码
这是一款使用js实现简洁实用的网页计算器功能源码。可实现比较基本的加减乘除四则运算功能，界面简洁实用，是一款比较基本的js运算功能源码。该源码可兼容目前最新的各类主流浏览器。
疯狂的猿
13 2
2的n次方_
|
27天前
|
存储 JavaScript 前端开发
【JavaScript】网页交互的灵魂舞者
本文介绍了 JavaScript 的三种引入方式（行内、内部、外部）和基础语法，包括变量、数据类型、运算符、数组、函数和对象等内容。同时，文章还详细讲解了 jQuery 的基本语法和常用方法，如 `text()`、`html()`、`val()`、`attr()` 和 `css()` 等，以及如何插入和删除元素。通过示例代码和图解，帮助读者更好地理解和应用这些知识。
2的n次方_
13 1
【JavaScript】网页交互的灵魂舞者
神明木佑
|
28天前
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
神明木佑
40 4
神明木佑
|
27天前
|
JavaScript 前端开发 容器
js之dom学习
js之dom学习
神明木佑
32 0
想飞的雪糕
|
1月前
|
Web App开发 缓存 前端开发
前端RAG：使用Transformers.js手搓纯网页版RAG（二）- 基于qwen1.5-0.5B
本文继续探讨了RAG的后半部分，通过在浏览器中运行qwen1.5-0.5B模型实现了增强搜索全流程。然而，由于浏览器与模型性能限制，该方案更适合研究、离线及高隐私场景。文章提供了完整的前端代码，让读者能够动手尝试。此外，详细介绍了代码框架、知识库准备、模型初始化及问答实现等步骤，并展示了实际运行效果。受限于当前技术，除非在离线或高隐私环境下，网页大模型的应用仍需进一步优化。
想飞的雪糕
47 0

热门文章

最新文章

  • 1
    在JavaScript面向对象编程中使用继承(3)
  • 2
    《JavaScript应用程序设计》一一2.9 方法API的设计
  • 3
    3.Ext JS 程序中使用路由
  • 4
    一看就会的Next.js App Router版 -- Routing（上）（一）
  • 5
    Bpmn.js 进阶指南之Lint流程校验(四)自定义检验
  • 6
    好程序员web前端培训分享JavaScript学习笔记cookie
  • 7
    YY游戏云的angular js实践总结
  • 8
    javascript类型系统之Array
  • 9
    js正则表达式语法
  • 10
    JS中document对象详解
  • 1
    深入学习 XML 解析器及 DOM 操作技术
    123
  • 2
    PHP爬虫技术：利用simple_html_dom库分析汽车之家电动车参数
    66
  • 3
    JS获取DOM元素的八种方法(含代码,简单易懂)
    143
  • 4
    vue3通过ref获取dom元素并修改样式
    573
  • 5
    vue创建dom的方法有哪些
    110
  • 6
    在created中创建dom操作的方法是什么？
    44
  • 7
    解释 Vue 的虚拟 DOM 及其优势。
    77
  • 8
    Vue.js中的diff算法：让虚拟DOM更高效
    156
  • 9
    在Vue中，还有哪些指令可以用于动态显示DOM元素？
    58
  • 10
    当需要频繁地切换DOM元素的显示状态时，应该使用`v-if`还是`v-show`？
    112

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • 移动Web前端开发
  • 前端开发CSS基础
  • jQuery开发教程
  • Ajax 前端开发入门与实战

    • 相关电子书

    更多
  • JavaScript函数
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • WEB网页编程实战
  • Html5和Webpack2：Webpack5打包JS和样式表
    • 下一篇
    DataWorks售前咨询