js 父窗口与子窗口交互
showModalDialog
父窗口
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>a.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<script language="JavaScript"> </script> <body>
<form name="form1" action="test.html" method="post" >
客户id: <input type="text" name="cid" value="" id="cid" ><br>
客户名称<input type="text" name="cname" value="" id="cname" >
<input type="button" name="ok" value="请选择客户" onclick="openWin();"/>
</form>
<script type="text/javascript">
function openWin(){
/*
* vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures])
* 参数：
* sURL：要打开的窗口的页面。可以使用绝对路径，也可以使用相对路径
* vArguments：给sURL那个页面的窗口传递参数。
* sFeatures：控制打开的sURL那个页面的窗口的样式
*/
window.showModalDialog("a2.html",window,"help:no;status:no;dialogHeight:150px;dialogWidth:220px");
}
function setValue(cid,cname){
document.getElementById("cid").value = cid;
document.getElementById("cname").value = cname;
}
</script>
</body> </html>
子窗口
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>a2.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<script language="JavaScript">
</script>
<body>
<table border="1">
<tr>
<td>操作</td>
<td>客户id</td>
<td>客户名称</td>
</tr> <tr>
<td><input type="button" value="选择" id="ss" onclick="viewData('001','深圳华为')"></td>
<td>001</td>
<td>深圳华为</td>
</tr>
<tr>
<td><input type="button" value="选择" onclick="viewData('002','用友软件')"> </td>
<td>002</td>
<td>用友软件</td>
</tr>
</table>
<script type="text/javascript">
function viewData(pid,pname){
//如何得到之前的那个窗口对象
var parentWindow = window.dialogArguments;
parentWindow.setValue(pid,pname);
window.close();
} </script>
</body> </html>
open
父窗口
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>a.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<script language="JavaScript"> </script> <body>
<form name="form1" action="test.html" method="post" >
<select edu="edu" id="edu">
<option value="本科">本科</option>
</select>
<input type="button" name="ok" value="添加" onclick="openWin();"/>
</form>
<script type="text/javascript">
function openWin(){
window.open("a2.html","_blank");
}
//增加option元素
function setValue(name){
//创建option
var optionElement = document.createElement("option");//<option></option>
//设置属性和内置文本
optionElement.setAttribute("value",name);
var textNode = document.createTextNode(name);
optionElement.appendChild(textNode);
//挂接到select上即可
document.getElementById("edu").appendChild(optionElement);
}
</script>
</body> </html>
子窗口
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>a2.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<table border="1"> <tr>
<td><input type="text" name="eduname" id="eduname" value="" size=8></td>
<td><input type="button" name="ok" value="确定" onclick="setData();"></td>
</tr> </table>
<script type="text/javascript">
function setData(){
var eduName = document.getElementById("eduname").value;
//得到父窗口
var parentWindow = window.opener;
parentWindow.setValue(eduName);
window.close();
} </script>
</body> </html>
js 父窗口与子窗口交互的更多相关文章
- JS实现关闭当前子窗口，刷新父窗口
一.JS实现关闭当前子窗口,刷新父窗口 JS代码如下: <script> function refreshParent() { window.opener.location.href = ...
- js window.open() 父窗口与子窗口的互相调用(未必有用)
javascript 父窗口与子窗口的互相调用 <html> <head></head> <body> 主要实现父子关系的页面 window.opene ...
- #js window.open() 父窗口与子窗口的互相调用【转】
未完整版 javascript 父窗口与子窗口的互相调用 a.html 父页面 <HTML> <HEAD> <meta http-equiv="content- ...
- 总结js(Iframe、window.open、window.showModalDialog)父窗口与子窗口之间的操作
http://hi.baidu.com/yashua839/blog/item/131fdb2fe547ef221f3089af.html一.Iframe 篇 //&&&&am ...
- JS实现关闭当前子窗口，刷新父窗口及调用父窗口的方法
一.js实现关闭当前子窗口,刷新父窗口 JS代码如下: <script> function refreshParent() { window.opener.location.href = ...
- HTML中IFrame父窗口与子窗口相互操作
一.Iframe篇 //&&&&&&&&&&&&&&&&&&am ...
- JavaScript(Iframe、window.open、window.showModalDialog)父窗口与子窗口之间的操作
一.Iframe 篇 公共部分 //父对象得到子窗口的值 //ObjectID是窗口标识,ContentID是元素ID function GetValue(ObjectID,ContentID) { ...
- 总结JavaScript(Iframe、window.open、window.showModalDialog)父窗口与子窗口之间的操作
一.Iframe 篇 //&&&&&&&&&&&&&&&&&&a ...
- iframe父窗口和子窗口之间的调用
1>父窗口获取子窗口 js方法 document.getElementById('if1').contentWindow.document: window.frames["if1&qu ...
- windows窗口分析，父窗口，子窗口，所有者窗口
(本文尝试通过一些简单的实验,来分析Windows的窗口机制,并对微软的设计理由进行一定的猜测,需要读者具备C++.Windows编程及MFC经验,还得有一定动手能力.文中可能出现一些术语不统一的现象 ...
随机推荐
- bzoj 4506: [Usaco2016 Jan]Fort Moo
4506: [Usaco2016 Jan]Fort Moo Description Bessie is building a fort with her friend Elsie. Like any ...
- Problem C: 零起点学算法93——矩阵转置
#include<stdio.h> int main() { ][],b[][]; while(scanf("%d%d",&n,&m)!=EOF) { ...
- shell中job管理
参考 http://www.cnblogs.com/ggjucheng/archive/2012/10/21/2733028.html 在命令后添加一个&,如firefox &: ...
- GNU ARM 汇编指令
第一部分 Linux下ARM汇编语法尽管在Linux下使用C或C++编写程序很方便,但汇编源程序用于系统最基本的初始化,如初始化堆栈指针.设置页表.操作 ARM的协处理器等.初始化完成后就可以跳转到C ...
- SqlServer_游标循环
--从游标取的值 ) ) --获取待返现数据,并循环处理 DECLARE TestCursor CURSOR FOR SELECT ID,UserName FROM dbo.UserInfo Open ...
- The file “Info.plist” couldn’t be opened because there is no such file
修改了Info.plist的实际文件位置(项目和单元测试对应不同的Info.plist),报错 (null): could not read data from '/Users/xxxxx/Deskt ...
- 工作中常用Lixu命令学习笔记
对于Linux,我是菜鸟,也是在工作中了才开始慢慢接触,用Linux的人都我都会觉得屌屌的,现在把工作中常用的一些Linux命令记录一下,供以后学习和参考. cd 这可能是我觉得Linux最简单的一个 ...
- Object.keys()的简单理解
1.对象的话返回属性名 var obj = {'a':'123','b':'345'}; console.log(Object.keys(obj)); //['a','b'] var obj1 = { ...
- Mac系统使用VS Code编译Bootstrap 4
环境: macOS 10.13.6 node.js 8.11.3 sass 1.10.3 bootstrap 4.1.3 vs code 1.25.1 Bootstrap3为我们提供了在线编译工具,可 ...
- go语言基础之基础数据类型 bool类型 浮点型
1.bool类型 示例1: package main import "fmt" func main() { var a bool a = true fmt.Println(&quo ...