注册通行证 用户名 密码
  • 文章投稿
  • 博客
  • 论坛
  • 设为首页
  • 加入收藏
jztop.com网络技术
  • 首页
  • | iT新闻
  • | 操作系统
  • | 组网建网
  • | 网络安全
  • | 程序开发
  • | 办公一族
  • | 工具软件
  • | 网页制作
  • | 多媒体制作
  • | 网吧技术
  • | 服务器
  • | 专题教程
Vista | 软件评测 | 系统备份 | 优化 | 进程 | 聊天 | 病毒 | Linux | 黑客 | 防火墙 | 数据库 | Web开发 | Java | Word | 游戏 | 32位开发 | 移动开发
当前位置:首页 > 网页制作 > JavaScript技术 内容正文:分析一下网页子窗口和网页父窗口的交互

分析一下网页子窗口和网页父窗口的交互

发布时间:2006-09-20 17:57:38 来源:csdn 网友评论 0 条

1、父窗口传递信息给子窗口

看代码实例:

<script language=javascript>

function outPut()
...{
//获取父窗口的文本信息赋值给text
var text = document.abc.text.value;
//打开子窗口,并且把操作句柄赋值给win变量,以下所有操作都是针对win对象的
var win = window.open("","mywin", "menubar=no,width=400,height=100,resizeable=yes");
//输出基本信息
win.document.writeln("<title>输出结果</title>");
win.document.writeln(
"你的信息是:<p>");
//输出从父窗口获取的信息
win.document.writeln(text);
win.document.close();
win.focus();
}

</script>  

<form name=abc method=post>
<input type=text name=text size=50>
//调用上面的函数
<input type=button value=提交 onClick="outPut()">

</form>

2、子窗口传递参数给父窗口

我们对上面的代码进行改造:

<script language=javascript>
function outPut()
...{
var text = document.abc.text.value;
var win = window.open("","mywin", "menubar=no,width=400,height=100,resizeable=yes");
win.document.writeln(
"<title>输出结果</title>");
win.document.writeln(
"你的信息是:<p>");
win.document.writeln(text);
win.document.writeln(
"<input type=text name=child value=子窗口信息>");

//对子窗口本身操作,使用self对象,对父窗口操作使用opener对象,这是关键
//把子窗口中表单的值回传给父窗口,取代父窗口表单以前的值,然后关闭子窗口
win.document.writeln("<input type=button value=关闭自己 onClick='window.opener.abc.text.value=self.child.value;self.close()'>");
//可以控制关闭父窗口
win.document.writeln("<input type=button value=关闭父窗口 onClick='window.opener.opener=null;window.opener.close()'>");
//刷新父窗口
win.document.writeln("<input type=button value=刷新父窗口 onClick='window.opener.location.reload()'>");

win.document.close();
win.focus();
}

</script>  

<form name=abc method=post>
<input type=text name=text size=50>
<input type=button value=提交 onClick="outPut()">
</form>

3、不是同页面的子窗口和父窗口交互

假设我们涉及到外部程序,比如php、asp等等,那么我们处理的可能是两个页面,比如,上传功能,我们就是需要打开一个新页面,然后再把新页面中的值传递给父页面。
局部代码实例:

<input type="input" value="" name="input_tag" id = "input_tag" onKeyUp="clearPreTagStyle()" size="40">
<input type="hidden" value="0" name="tagid" id="tagid">
<input type="button" value="标签" onclick="popUpWindow('tag.php?tag='+escape(document.tryst_form.input_tag.value))">

以上是父窗口的部分代码,里面的popUpWindow是封装好的window.open函数,所以理解面面的tag.php是另外一个页面就可以,我们需要把当前表单中的值提交给tag.php页面去处理。
tag.php部分代码:

查询标签结果:

<a href="#" name="tag_1">生活</a><a href="#" onclick="opener.document.tryst_form.input_tag.value = document.tag_1.innerHTML">加入该标签</a>

<a href="#" name="tag_2">生活秀</a><a href="#" onclick="opener.document.tryst_form.input_tag.value = document.tag_2.innerHTML">加入该标签</a>
这个就是我们的子窗口,我们要把tag_1和tag_2返回到子窗口中,虽然他们不是同一个页面。这里有个知识点,就是我们如何获取连接中的值,我们使用innerHTML属性:document.tag_2.innerHTML 这个就是我们获取了tag_2的值“生活秀”,我们也能使用其他方法获取,比如:document.all.tag_2.innerHTML,或者this.innerHTML就是指本身的链接的值。

访问父窗口也是使用opener对象来处理:opener.document.tryst_form.input_tag.value,就能够改变父窗口的值。
相关文章
    无相关信息
【评论】【收藏本文】【打印】【关闭】
上一篇文章:最近收集的有用的Javscript小技巧
下一篇文章:弹出窗口window.open()的参数列表
讨论区
查看
已有 0 位对此新闻感兴趣的网友发表了看法
匿名发表
注册通行证 登陆
图文阅读推荐
推荐阅讯
  • 实例:尽可能写友好的Javascript代码
  • 一个表单日期输入的JS脚本 非常实用
  • 网页特效:一段实用的图片滚动显示代码
  • JavaScript高级程序设计:2.5 原始值
  • 非常实用的效果:用JS计算剩余可用字数
  • 页面中文乱码之完全Script解决方案
  • JavaScript高级程序设计:2.4 保留字
  • JavaScript高级程序设计:2.1 语法
  • 使用AJAX的十大理由
  • 谈AS+JS的Flash网站无刷新定位技术
阅读排行
  • 1.网页特效:一段实用的图片滚动显示代码
  • 2.网页特效实例:用js获取单选按钮的数据
  • 3.Javascript特效:随机显示图片的源代码
  • 4.Javascript技术技巧大全
  • 5.IE和FireFox下javascript读写XML实现广告轮
  • 6.用 JavaScript 来操作字符串的函数
  • 7.添加到收藏夹的Javascript脚本-适合IE和Fir
  • 8.怎样判断浏览器是否支持javascript?
  • 9.JavaScript实现网页图片等比例缩放
  • 10.网页特效:随机显示广告的JS源代码
专题教程
  • 大话G游 专题:手机病毒揭密
  • ARP攻击防范与解决方案 路由故障处理手册
  • Picasa中文版_Picasa教程 专题:清除流氓软件
  • Firefox专题 seo搜索引擎优化专区
  • 重装Windows必知的事情 装机之必备软件大行动
病毒专杀栏
  • 杀毒软件反被病毒杀 连"救命"都不能喊
  • 金山ARP防火墙
  • 还原卡神话破灭“机器狗”病毒来势汹汹
  • cctv经济半小时:你的手机现在安全吗?
  • 新挂马方式开始流行 ARP挂马称雄局域网
  • 木马和病毒清除的通用解法
  • IP地址不再冲突 查找ARP攻击者元凶
  • 教你几招识别和防御Web网页木马
  • 分析:封杀BT只是暂时的止痛药
  • QQ爆危险漏洞,“QQ游戏邀请大盗”邀请你玩病
关于我们 | 诚聘英才 | 联系我们 | 版权声明 | 网站大事 | 网站地图 | 意见建议
CopyRight 2005-2007 Jztop.Com 版权所有 未经许可 请勿转载