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

news/2024/7/3 14:15:01

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部分代码:

查询标签结果:

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

< href ="#"  name ="tag_2" > 生活秀 </ 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,就能够改变父窗口的值。


http://www.niftyadmin.cn/n/595146.html

相关文章

初学 Spring Boot,你需要了解的 7 样东西

本文翻译自 7 Things to Know Getting Started With Spring Boot by Ranga Karanam Spring Boot 是一个比较 tricky 的框架&#xff0c;所以也往往不容易理解。这篇教程将讲解 Spring Boot 的基本组成&#xff0c;包括 Starter 项目、自动配置和 Starter Parents 等&#xff0…

cpu怎么超频_CPU超频是什么意思?显卡超频是什么意思?看过之后你就懂了!

超过10万人正在关注赶快来关注吧&#xff0c;这里有你想找的热点资讯&#xff0c;这里有你想要的各种资料&#xff0c;还有海量的资源&#xff0c;还在等什么。快来关注&#xff0c;大佬带你开车。一.在CPU参数中&#xff0c;我们经常会看到默认睿频、超频、体质等参数。不少小…

为什么用mysql_为什么使用mysql

市场上有许多关系数据库管理系统。包括Microsoft SQL Server&#xff0c;Microsoft Access&#xff0c;Oracle&#xff0c;DB2等。有人可能会问为什么我们会选择MySQL而不是其他数据库管理系统&#xff1f;这个问题的答案取决于许多因素。让我们来看看MySQL与SQL Server等关系型…

机器学习使用tokenizer.fit_on_texts报‘float‘ object has no attribute ‘lower‘错解决办法

机器学习使用tokenizer.fit_on_texts报float object has no attribute lower错解决办法最近在学习机器。在学习过程中使用kaggle中的Womens Clothing E-Commerce Reviews.csv数据集&#xff0c;用Keras分词器Tokenizer&#xff0c;使用tokenizer.fit_on_texts生成词典报float o…

一起撸个微信图片浏览的BaseActivity吧(上)——初步思考与基础结构

本项目git: https://github.com/razerdp/ZoomViewActivity 【下篇】一起撸个微信图片浏览的BaseActivity吧&#xff08;下&#xff09;——过渡动画的实现 项目预览图&#xff1a; 距离上次更新博客有两三个月了。。。。太懒了orz... 在微信的日常使用中&#xff0c;我们点击图…

认识SOAR-安全事件编排自动化响应

SOAR是最近几年安全市场上最火热的词汇之一。SOAR究竟是什么&#xff0c;发展历程是什么&#xff0c;能够起什么作用&#xff0c;带着这些问题我们来认识一下SOAR。 一、SOAR是什么 SOAR 一词来自分析机构 Gartner&#xff0c;SOAR-Security Orchestration, Automation and R…

matlab 创建批量文件夹_PS批量处理图片技巧!

当我们在工作中&#xff0c;如果有上百张图片&#xff0c;一张一张处理估计一天时间也不够&#xff0c;那么怎么批量处理图片呢&#xff0c;比如批量压图、批量加个人水印等问题。于是写下我批量处理照片的方法与大家分享。现在&#xff0c;让我们搞起来&#xff01;一&#xf…

在power query中连接mysql_Power Query 建立数据连接的6种常用方式

Power Query有5大类40种的连接方式&#xff0c;可以连接文件、数据库、在线服务等等各种数据源。今天我们介绍6种常用的连接方式&#xff1a;自文件中的3种&#xff1a;从工作簿从文本/CSV从文件夹从其他源中的3种&#xff1a;自表格区域自网络空白查询从工作簿建立连接&#x…