稳扎稳打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















































































ScriptableDemo.xaml.cs


























































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>
< 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
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>
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
































































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>
< 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
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>
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






















































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>
< 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>
OK
[源码下载]
[源码下载]
本文转自webabcd 51CTO博客,原文链接:http://blog.51cto.com/webabcd/343915
,如需转载请自行联系原作者