codeLib之javaScript之父子窗口问题1

1.window.open()

    在父窗口中调用window.open()方法来打开子窗口;

    在子窗口中使用window.opener来与父窗口进行数据交互。

    示例代码:

    主窗口html

<div id="popup_1" align="center"><hr>
	<fieldset><legend>window.open()</legend>
		<p><label for="name_1">名字:</label> <input type="text" name="name_1"></p>
		<p><label for="age_1">年龄:</label> <input type="text" name="age_1"></p>
		<p><label for="sex_1">性别:</label> <input type="text" name="sex_1"></p>
		<p><label for="dep_1">部门:</label> <input type="text" name="dep_1"></p>
		<p><label for="pro_1">职位:</label> <input type="text" name="pro_1"></p>
           	</fieldset>
           	<input type="button" class="button" οnclick="showUserDialog(1)" value="显示子窗口一">
</div>

    主窗口js 

var options = "location=no,menubar=no,resizable=no,scrollbars=yes,status=no,titlebar=yes,toolbar=no,left=200,top=200,height=300,width=400";
var dialogOptions = "dialogWidth:400px;dialogHeight:300px;dialogLeft:350px;dialogTop:150px;center:no;help:no;resizable:no;status:no;scroll:no";
var legends = ["window.open()","window.showModalDialog()","window.showModelessDialog()"];
var title = "";
var arg_2 = new Object();
function showUserDialog(flag){
    title = legends[flag - 1];
    switch (flag) {
        case 1:
                window.open("inner_1.html","_blank",options);
            break;
        case 2:
                arg_2.title = title;
                arg_2.name_2 = document.all.name_2.value;
                arg_2.age_2 = document.all.age_2.value;
                arg_2.sex_2 = document.all.sex_2.value;
                arg_2.dep_2 = document.all.dep_2.value;
                arg_2.pro_2 = document.all.pro_2.value;                
                var res_2 = window.showModalDialog("inner_2.html",arg_2,dialogOptions);
                if(typeof(res_2) == "object"){
                    document.all.name_2.value = res_2.name_2;
                    document.all.age_2.value = res_2.age_2;
                    document.all.sex_2.value = res_2.sex_2;
                    document.all.dep_2.value = res_2.dep_2;
                    document.all.pro_2.value = res_2.pro_2;
                }
            break;
        case 3:
                window.showModalDialog("inner_3.html",window,dialogOptions);
            break;            
        default:
            break;
    }
}

   子窗口html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Insert title here</title>
		<script language="javascript" src="script/popupWindow.js"></script>
	</head>
	<body οnlοad="init_1()">
		<div align="center">
			<fieldset>
				<script language="javascript">
					document.write("<legend>" + getTitle_1() + "</legend>");
				</script>
				<p><label for="name_1">名字:</label> <input type="text" name="name_1"></p>
				<p><label for="age_1">年龄:</label> <input type="text" name="age_1"></p>
				<p><label for="sex_1">性别:</label> <input type="text" name="sex_1"></p>
				<p><label for="dep_1">部门:</label> <input type="text" name="dep_1"></p>
				<p><label for="pro_1">职位:</label> <input type="text" name="pro_1"></p>
			</fieldset>
			<input type="button" value="提 交" οnclick="handIn_1()" class="">
		</div>
	</body>
</html>

    子窗口js

function init_1(){
	document.all.name_1.value = window.opener.document.all.name_1.value;
    	document.all.age_1.value = window.opener.document.all.age_1.value;
    	document.all.sex_1.value = window.opener.document.all.sex_1.value;
   	document.all.dep_1.value = window.opener.document.all.dep_1.value;
    	document.all.pro_1.value = window.opener.document.all.pro_1.value;
}
function handIn_1(){
    	window.opener.document.all.name_1.value = document.all.name_1.value;
    	window.opener.document.all.age_1.value = document.all.age_1.value;
     	window.opener.document.all.sex_1.value = document.all.sex_1.value;
    	window.opener.document.all.dep_1.value = document.all.dep_1.value;
    	window.opener.document.all.pro_1.value = document.all.pro_1.value;
    	window.close();
}
function getTitle_1(){
    	return window.opener.title;
}

  

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
探索全栈前端技术的魅力:HTML+CSS+JS+JQ+Bootstrap网站源码深度解析 在这个数字化时代,构建一个既美观又功能强大的网站成为了许多开发者和企业追逐的目标。本份资源精心汇集了一套完整网站源码,融合了HTML的骨架搭建、CSS的视觉美化、JavaScript的交互逻辑、jQuery的高效操作以及Bootstrap的响应式设计,全方位揭秘了现代网页开发的精髓。 HTML,作为网页的基础,它构建了信息的框架;CSS则赋予网页生动的外观,让设计创意跃然屏上;JavaScript的加入,使网站拥有了灵动的交互体验;jQuery,作为JavaScript的强力辅助,简化了DOM操作与事件处理,让编码更为高效;而Bootstrap的融入,则确保了网站在不同设备上的完美呈现,响应式设计让访问无界限。 通过这份源码,你将: 学习如何高效组织HTML结构,提升页面加载速度与SEO友好度; 掌握CSS高级技巧,如Flexbox与Grid布局,打造适应各种屏幕的视觉盛宴; 理解JavaScript核心概念,动手实现动画、表单验证等动态效果; 利用jQuery插件快速增强用户体验,实现滑动效果、Ajax请求等; 深入Bootstrap框架,掌握移动优先的开发策略,响应式设计信手拈来。 无论是前端开发新手渴望系统学习,还是资深开发者寻求灵感与实用技巧,这份资源都是不可多得的宝藏。立即深入了解,开启你的全栈前端探索之旅,让每一个网页都成为技术与艺术的完美融合!
探索全栈前端技术的魅力:HTML+CSS+JS+JQ+Bootstrap网站源码深度解析 在这个数字化时代,构建一个既美观又功能强大的网站成为了许多开发者和企业追逐的目标。本份资源精心汇集了一套完整网站源码,融合了HTML的骨架搭建、CSS的视觉美化、JavaScript的交互逻辑、jQuery的高效操作以及Bootstrap的响应式设计,全方位揭秘了现代网页开发的精髓。 HTML,作为网页的基础,它构建了信息的框架;CSS则赋予网页生动的外观,让设计创意跃然屏上;JavaScript的加入,使网站拥有了灵动的交互体验;jQuery,作为JavaScript的强力辅助,简化了DOM操作与事件处理,让编码更为高效;而Bootstrap的融入,则确保了网站在不同设备上的完美呈现,响应式设计让访问无界限。 通过这份源码,你将: 学习如何高效组织HTML结构,提升页面加载速度与SEO友好度; 掌握CSS高级技巧,如Flexbox与Grid布局,打造适应各种屏幕的视觉盛宴; 理解JavaScript核心概念,动手实现动画、表单验证等动态效果; 利用jQuery插件快速增强用户体验,实现滑动效果、Ajax请求等; 深入Bootstrap框架,掌握移动优先的开发策略,响应式设计信手拈来。 无论是前端开发新手渴望系统学习,还是资深开发者寻求灵感与实用技巧,这份资源都是不可多得的宝藏。立即深入了解,开启你的全栈前端探索之旅,让每一个网页都成为技术与艺术的完美融合!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值