子窗口、父窗口和Silverlight之间的相互调用


Posted in Javascript onAugust 16, 2010

其实,他们之间的调用还是很简单的~
基础篇
一、父页面调用子页面中的JS
我们先创建一个子窗体

var win 
$(function () { 
Root = $('#Root').val();//设置根目录 
}); 
function OpenPlayer(id, type, add) { 
//这里是用来限制同一个窗口只能弹出一次的 
//其实就算不做限制,只要window.open参数中的name相同,就不会重复打开 
//window.open中的参数可以参考别的文章,有很多 
if (win == null || win.closed) { 
win = window.open('http://loaclhost/sl.aspx', 'win', 'width=870,height=650,top=1,left=0,scrollbars=0,resizable=0,status=1', true); 
}

那怎么调用呢?
this.alert('hello world!'); 
win.alert('hello world!'); 
win.onload = function () { this.alert('test'); };

众所周知,第一行是在本窗口弹出一个提示框(this可以一般都会省略~)
那其实,this和win指向的是同类型,不同的对象罢了
所以,他们的方法都是一样的。
第二行就是在子窗口中弹出一个提示框的代码。
你还可以在父窗体中写子窗体的事件~
第三行的作用是,当子窗体加载完成后,父窗口弹出提示框。
二、子窗体调用父窗体
这个和上面差不多,当父窗体打开一个子窗体后,你可以这样访问到父窗体
window.opener
这个对象就是父窗体,直接调用相应的函数即可
三、子窗体调用silverlight函数或对象
这个在MSND上有详细介绍,中文的~在这里,我帮大家提一下主要的几个步骤(调用silverlight对象的方法就不贴出来了,里面有)
另附 传送门:
1、现在silverlight中,给需要被调用的函数加上一个attribute——ScriptableMember
// MyScriptableManagedType.cs 
using System.Windows.Browser; 
namespace HB { 
public class MyScriptableManagedType { 
[ScriptableMember()] 
public string MyToUpper(string str) { 
return str.ToUpper(); 
} 
[ScriptableMember()] 
public string Name { get; set; } 
} 
}

2、在构造函数中注册这个对象
MyScriptableManagedType smt = new MyScriptableManagedType(); 
HtmlPage.RegisterScriptableObject("mySLapp", smt); 
//如果这个函数不是外部类中的函数,而是sl主体的函数,那直接传入this指针就可以了

3、打开slverlight所在的页面
在 Silverlight 对象标记中,添加具有值"pluginLoaded"的 onLoad 属性。
下面的示例演示用于 Silverlight 控件引用的 HTML 标记。
<object data="data:application/x-silverlight-2," 
type="application/x-silverlight-2" width="100%" height="100%"> 
<param name="source" value="ClientBin/HB.xap"/> 
<param name="onerror" value="onSilverlightError" /> 
<param name="onLoad" value="pluginLoaded" /> 
<!-- ... --> 
</object>

4、在页上现有的 script 元素中,添加 pluginLoaded 方法的 JavaScript 函数。
使用 getHost 方法获取对 Silverlight 控件的引用。下面的示例演示 pluginLoaded 方法的 JavaScript 代码。
<script type="text/javascript"> 
var slCtl=null; 
function pluginLoaded(sender,args){ // HTML version 
slCtl = sender.getHost(); 
alert( slCtl.Content.mySLapp.MyToUpper("test string")); 
} 
</script>

四、silverlight调用子窗体中的js
同样,也是MSDN上的文章~ 传送门:
这个超级简单,直接:
HtmlPage.Window.Invoke("MethodName", args);
前面一个参数是函数名,后面的参数是这个函数需要传入的参数
提高篇
五、父页面打开子页面的时候,直接给silverlight传入参数
这个主要是在初始化的时候用到
在第一部部分中,我们打开了 http://loaclhost/sl.aspx 这个子窗口
这时候,我们可以用GET方式传入一些参数 例如:http://loaclhost/sl.aspx?id=1
然后在silverlight中这样访问:

string id = HtmlPage.Document.QueryString["id"];

六、怎么样才能把子窗口前置?
我的子页面中的silverlight应用程序其实是一个音乐播放器,然后,所以子页面一般是最小化的。
但是,当我在silverlight应用程序里弹出MessageBox的时候它还是处于最小化状态… 这样对用户很不友好。
想要把子窗口前置的话,只能通过在父窗口中调用 win.focus() 函数
但是,我们只要稍微处理一下,在父窗口,子窗口,sl中就都可以实现这个目的了
所以可以这样做:
1、在父窗口中写一个函数,叫Focus()
然后调用 win.focus();
2、在子窗口中写一个函数,叫Focus()
调用 window.opener.Focus()
3、最后,如果想让silverlight应用程序前置,你在父窗口或者子窗口中调用Focus()这个函数,也可以再silverlight中调用子窗口的Focus()函数

七、怎么判断silverlight已经加载完成?
下面有几个思路,有对有错
(√)在silverlight应用程序的构造函数中,调用子页面或者父页面(通过子页面)的js 【这个方法可行,但是略显麻烦】
(×)在子页面中 写 window.onload 事件 【这个事件触发的时候silverlight不一定加载完成】
(√)还记得第三部分,第3步里的这个吗? <param name="onLoad" value="pluginLoaded" /> 【推荐做法】
加入这条以后,silverlight加载完成后就出触发子页面的这个函数 函数名可以更改

Javascript 相关文章推荐
根据分辨率不同,调用不同的css文件
Aug 25 Javascript
img的onload的另类用法
Jan 10 Javascript
javascript 写类方式之五
Jul 05 Javascript
jQuery实战之仿淘宝商城左侧导航效果
Apr 12 Javascript
Javascript Web Slider 焦点图示例源码
Oct 10 Javascript
JS计算网页停留时间代码
Apr 28 Javascript
js操作iframe父子窗体示例
May 22 Javascript
vue-cli启动本地服务局域网不能访问的原因分析
Jan 22 Javascript
Vue中对拿到的数据进行A-Z排序的实例
Sep 25 Javascript
js实现搜索栏效果
Nov 16 Javascript
详解Vue.js v-for不支持IE9的解决方法
Dec 29 Javascript
JS中的算法与数据结构之队列(Queue)实例详解
Aug 20 Javascript
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
Aug 16 #Javascript
JavaScript实用技巧(一)
Aug 16 #Javascript
IE6下js通过css隐藏select的一个bug
Aug 16 #Javascript
新手常遇到的一些jquery问题整理
Aug 16 #Javascript
使用jQuery轻松实现Ajax的实例代码
Aug 16 #Javascript
jQuery实现原理的模拟代码 -6 代码下载
Aug 16 #Javascript
jQuery中的bind绑定事件与文本框改变事件的临时解决方法
Aug 13 #Javascript
You might like
PHP加密解密实例分析
2015/12/25 PHP
php实现图片按比例截取的方法
2017/02/06 PHP
用jscript启动sqlserver
2007/06/21 Javascript
javascript网页关闭时提醒效果脚本
2008/10/22 Javascript
获得所有表单值的JQuery实现代码[IE暂不支持]
2012/05/24 Javascript
jquery的相对父元素和相对文档定位示例代码
2013/08/02 Javascript
实现音乐播放器的代码(html5+css3+jquery)
2015/08/04 Javascript
jQuery基于扩展简单实现倒计时功能的方法
2016/05/14 Javascript
阻止表单提交按钮多次提交的完美解决方法
2016/05/16 Javascript
jquery mobile界面数据刷新的实现方法
2016/05/28 Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
2016/07/24 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
2017/02/27 Javascript
Vue制作Todo List网页
2017/04/26 Javascript
jquery append与appendTo方法比较
2017/05/24 jQuery
javascript实现文字无缝滚动效果
2017/08/26 Javascript
使用Electron构建React+Webpack桌面应用的方法
2017/12/15 Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
2018/05/21 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
2019/06/24 Javascript
vue实现设置载入动画和初始化页面动画效果
2019/10/28 Javascript
微信小程序封装多张图片上传api代码实例
2019/12/30 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
2020/02/23 Javascript
微信小程序自定义弹出层效果
2020/05/26 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
2020/06/05 Javascript
python操作oracle的完整教程分享
2018/01/30 Python
Python 字典中的所有方法及用法
2020/06/10 Python
tensorflow/core/platform/cpu_feature_guard.cc:140] Your CPU supports instructions that this T
2020/06/22 Python
Python3.7安装PyQt5 运行配置Pycharm的详细教程
2020/10/15 Python
利用CSS3实现自定义滚动条代码分享
2016/08/18 HTML / CSS
澳大利亚最大的在线美发和美容零售商之一:My Hair Care & Beauty
2019/08/24 全球购物
PHP开发工程师面试问题集锦
2012/11/01 面试题
存储过程的优点有哪些
2012/09/27 面试题
《小白兔和小灰兔》教学反思
2014/02/18 职场文书
气象学专业个人求职信
2014/03/15 职场文书
学院党的群众路线教育实践活动整改方案
2014/10/04 职场文书
怎样写离婚协议书
2015/01/26 职场文书
党组织结对共建协议书
2016/03/23 职场文书