html父子页面(弹框)的实现和交互[通信]

    html页面,有的时候不是直接一个页面,一连串(或并行)页面的结束,为了提高用户体验或完成某种功能需要父子页面(或窗口)来实现,或者父子,兄弟窗口来完成。本文主要介绍:

    html父子页面(弹框)的实现和交互[通信]

    实现简单业务介绍:

    1.父页面,点下“注册”按钮,按钮锁定,并弹框;

     2.父页面隐藏域的值“欢迎您的注册……”,传给子弹框,并显示;

     3.子窗口,进行注册用户,成功后调用父页面js方法,将注册的“用户名”填写到登录用户名中;

     4.用户登录,后台ajax传值,显示注册的“用户名”;

     5.后台类的处理,使用MAP保存[内存暂时],然后用用户名去获取对象进行登录验证。

 

父页面jsp代码[popupmain.jsp]:

<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">

    <title>注册页面</title>

	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript" src="${pageContext.request.contextPath }/tsjs/jquery-1.11.1.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath }/tsjs/popupmain.js"></script>	

  </head>

  <body>
  <center id="centerid">
  	<div id="userlogin">
  		<form id="userloginform">
  		<table id="tbuserlogin" width="150" border="0" cellpadding="0" cellspacing="0">
  			<tr class="setshow">
  				<td width="30">user:</td>
  				<td width="70">
  					<input id="userlog" name="userlog" type="text" maxlength="8" size="15" />
  				</td>
  				<td width="50"><div id="userlogmsg"></div></td>
  			</tr>
  			<tr class="setshow">
  				<td width="30">pass:</td>
  				<td width="70">
  					<input id="passlog" name="passlog" type="password" maxlength="12" size="15" />
  				</td>
  				<td></td>
  				<td></td>
  			</tr>
  			<tr>
  				<td colspan="2" align="right">
  				<div id="userregbtdiv">
  					<input type="button" id="popupbt" value="注册" />
  				</div>
  				<div id="userloginbtdiv">
  					<input type="button" id="userlogin" value="登录" onclick="login(this);" />
  				</div>
  				</td>
  			</tr>
  		</table>
  		</form>
  	</div>
  </center>
    <input id="contextPath" type="hidden" value="${pageContext.request.contextPath }">
    <!-- 子窗口 -> 父页面的交互传值[到] -->
    <input id="returnreginfo" type="hidden" value="">
    <!-- 父页面 -> 子窗口的交互传值 -->
    <input id="maintochildwidow" type="hidden" value="欢迎您的注册……">
  </body>
</html>

父页面的js[popupmain.js]:

$(document).ready(function() {
	var contextPath = $("#contextPath").val();
	$("tr[class='setshow']").hide();
	$("#userloginbtdiv").hide();
	$("#popupbt").click(function(){
		//锁定注册按钮
		$("#popupbt").attr("disabled",true);
		//弹框的url
		var popup_url = contextPath+"/tsjsp/popup.jsp";
		//弹框高度
		var popup_height = "350";
		//弹框宽度
		var popup_width = "500";
		//获得窗口的垂直位置
		var popup_top_dist = (window.screen.availHeight - 30 - popup_height) / 2;
		//获得窗口的水平位置
		var popup_left_dist = (window.screen.availWidth - 10 - popup_width) / 2;
		//打开连接弹框界面
		winOpen = window.open(popup_url,'newwindow','width='+popup_width+',height='+popup_height+',top='+popup_top_dist+',left='+popup_left_dist+',toolbar=no,menubar=no,scrollbars=yes,resizable=no,location=no,status=no');
		//检查是否关闭新窗口,1s一次
		winOpenClosedShow();//window.onload
		window.setInterval("winOpenClosedShow()",1000);
	});
});
function login(obj){
	var value = obj.value;
	var id =obj.id;
//	alert(value+"*"+id);
	$("#userlogin").attr("disabled",true);
	$.ajax({
		url:"user.do?param=login",
		type:"post",
		data:$("#userloginform").serialize(),
		timeout:20000,
		success:function(data){
			$("#centerid").html("<div style=\"color: #0F0;\">"+data+"欢迎您登录...<div>");
		},
		error:function(){
			alert("您登录失败,请重新登录");
		}
	});
}
//弹框关闭,用户进行登录
function winOpenClosedShow(){
	if(!winOpen || winOpen.closed){
		$("#popupbt").attr("disabled",false);
		$("#userregbtdiv").hide();
		$("tr[class='setshow']").show();
		$("#userloginbtdiv").show();
	}
}
function setUser(){
	setTimeout(function(){
		var returnreginfo = $("#returnreginfo").val();
		$("#userlog").val(returnreginfo);
	},1000);
}

注:获取当前的操作this下的obj对象[参数]的属性:

           1.var id = $(obj).attr("id"); var id = $(obj).val();

            2.var id =obj.id; var value = obj.value;

注:setTimeout(A,B);是属于 window 的 method, 但我们都是略去 window 这顶层物件名称, 这是用来设定一个时间, 时间到了, 就会执行一个指定的 method

A为要执行的代码,字符,函数等都可以,B为定时时间,单位为ms[毫秒]

注:window.open();

环境:JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+

语法:window.open(pageURL,name,parameters)

          pageURL为子窗口路径;name为子窗口句柄;parameters为窗口参数(各参数用逗号分隔)
         参数|取值范围|说明:其中yes/no也可使用1/0;pixelvalue为具体的数值,单位像素。

alwaysLowered | yes/no | 指定窗口隐藏在所有窗口之后

alwaysRaised | yes/no | 指定窗口悬浮在所有窗口之上

depended | yes/no | 是否和父窗口同时关闭

directories | yes/no | Nav2和3的目录栏是否可见

height | pixelvalue | 窗口高度

hotkeys | yes/no | 在没菜单栏的窗口中设安全退出热键

innerHeight | pixelvalue | 窗口中文档的像素高度

innerWidth | pixelvalue | 窗口中文档的像素宽度

location | yes/no | 位置栏是否可见

menubar | yes/no | 菜单栏是否可见

outerHeight | pixelvalue | 设定窗口(包括装饰边框)的像素高度

outerWidth | pixelvalue | 设定窗口(包括装饰边框)的像素宽度

resizable | yes/no | 窗口大小是否可调整

screenX | pixelvalue | 窗口距屏幕左边界的像素长度

screenY | pixelvalue | 窗口距屏幕上边界的像素长度

scrollbars | yes/no | 窗口是否可有滚动栏

titlebar | yes/no | 窗口题目栏是否可见

toolbar | yes/no | 窗口工具栏是否可见

Width | pixelvalue | 窗口的像素宽度

z-look | yes/no | 窗口被激活后是否浮在其它窗口之上

 

子窗口jsp代码[popup.jsp]:

<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">

    <title>用户注册界面</title>

	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript" src="${pageContext.request.contextPath }/tsjs/jquery-1.11.1.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath }/tsjs/popup.js"></script>
  </head>
  <!-- overflow:滚动条 -->
  <body id="bodyid" style="overflow: scroll;">
  <center id="centerid">
  <!-- 欢迎语显示 -->
  	<div id="welcomto"></div><br />
  	<div id="userreg">
  	 <form id="userregform">
  		<table id="tbuserreg" width="150" border="0" cellpadding="0" cellspacing="0">
  			<tr>
  				<td width="30">user:</td>
  				<td width="70">
  					<input id="userreg" name="userreg" type="text" maxlength="8" size="15" />
  				</td>
  				<td width="50"><div id="userregmsg" style="color: red;"></div></td>
  			</tr>
  			<tr>
  				<td width="30">pass:</td>
  				<td width="70">
  					<input id="passreg" name="passreg" type="password" maxlength="12" size="15" />
  				</td>
  				<td></td>
  			</tr>
  			<tr>
  				<td width="30">name:</td>
  				<td width="70">
  					<input id="namereg" name="namereg" type="text" maxlength="12" size="15" />
  				</td>
  				<td></td>
  			</tr>
  			<tr>
  				<td colspan="2" align="right">
  					<input id="regbt" name="regbt" type="button" value="reg">
  				</td>
  			</tr>
  		</table>
  	 </form>
  	</div>
  </center>
  </body>
</html>

子窗口js代码[popup.js]:

$(document).ready(function(){
	//window.opener表示打开子窗口的父(主)页面
	var parentHtml = window.opener;
	//父页面给子页面传值,也可以用url传参 eg:"url?id="+id; 父  -> 子[交互]
	if(parentHtml != null){
		var wlstr = parentHtml.document.getElementById("maintochildwidow").value;
		$("#welcomto").html("<span style=\"color:blue;\">"+wlstr+"</span>");
	}
	//获取弹框页面内容的高度
	var htmlheight = document.body.clientHeight;
	//获取弹框页面内容的宽度
	var htmlwidth = document.body.clientWidth;
	//用户内容大小,大于弹框大小,显示滚动条
//	alert(htmlheight+"*"+htmlwidth);
	if(htmlheight < 350){
		$("#bodyid").css("overflow-y","hidden");
	}
	if(htmlwidth < 500){
		$("#bodyid").css("overflow-x","hidden");
	}
	if(htmlheight <= 350 && htmlwidth <= 500){
		$("#bodyid").css("overflow","hidden");
	}
	//注册
	$("#regbt").click(function(){
		$("#regbt").attr("disabled",true);
		$.ajax({
			url:"user.do?param=reg",
			type:"post",
			data:$("#userregform").serialize(),
			timeout:20000,
			success:function(data){
				//保存后台返回数据到父界面popupmain.jsp   子  -> 父[交互]
				window.opener.document.getElementById("returnreginfo").value = data;
				//调用父界面的js方法,setUser(),自动填写用户名
				window.opener.setUser();
				//关闭弹框子界面
				window.close();
			},
			error:function(){
				$("#centerid").html("<div style=\"color: red;\">不好意思,由于……,您注册失败,请关闭页面,点击重新注册...<div>");
			}
		});
	});
});

struts1configuration[struts-config.xml]配置:

  	<action path="/user"  parameter="param"  scope="request"
  	type="com.ts.actions.UserRegAndLoginAction">
  		<forward name="success" path="/tsjsp/popupmain.jsp"></forward>
  	</action>

后台处理类[UserRegAndLoginAction]:

package com.ts.actions;

import java.io.PrintWriter;
import java.util.HashMap;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.log4j.Logger;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
import org.apache.struts.actions.DispatchAction;

 /**
 * ClassName: UserRegAndLoginAction <br/>
 * Description: TODO <br/>
 * Date: 2015-1-22 下午05:09:23 <br/>
 * <br/>
 *
 * @author [email protected]
 *
 * first made
 * @version 0.0.1<br/>
 *
 */

public class UserRegAndLoginAction extends DispatchAction {
    private static final Logger LOG = Logger.getLogger(UserRegAndLoginAction.class);
    //db
    private static Map<String, User> userMap = new HashMap<String, User>();
    //reg
    public ActionForward reg(ActionMapping mapping, ActionForm form, HttpServletRequest request,
            HttpServletResponse response) throws Exception {
        String userId = request.getParameter("userreg");
        String userPass = request.getParameter("passreg");
        String userName = request.getParameter("namereg");
        User user = new User();
        user.userId = userId;
        user.userPass = userPass;
        user.userName = userName;
        userMap.put(userId, user);
        LOG.info("user reg:"+userId+"***"+userPass+" - "+userName);
        response.setHeader("Cache-Control", "no-cache");
        response.setContentType("text/html");
        response.setCharacterEncoding("GBK");
        PrintWriter out = response.getWriter();
        out.print(userId);
        out.close();
        return null;
    }
    //login
    public ActionForward login(ActionMapping mapping, ActionForm form, HttpServletRequest request,
            HttpServletResponse response) throws Exception {
        String userId = request.getParameter("userlog");
        String userPass = request.getParameter("passlog");
        User user = userMap.get(userId);
        LOG.info("user reg:"+user.userId+"***"+user.userPass);
        LOG.info("user login:"+userId+"***"+userPass);
        if(userId.equals(user.userId) && userPass.equals(user.userPass)){
            response.setHeader("Cache-Control", "no-cache");
            response.setContentType("text/html");
            response.setCharacterEncoding("GBK");
            PrintWriter out = response.getWriter();
            out.print(user.userName);
            out.close();
        }
        return null;
    }
    //vo
    class User{
        public String userId;
        public String userPass;
        public String userName;
    }
}

系列效果图:

 

时间: 2015-01-23

html父子页面(弹框)的实现和交互[通信]的相关文章

关于页面弹框功能实现-怎么实现这个 弹框功能 希望有详细的朋友能帮忙

问题描述 怎么实现这个 弹框功能 希望有详细的朋友能帮忙 解决方案 有两种方案, 1.写一个layout展现弹窗的内容(图片,变宽,关闭按钮),再在activity里面写一个AlertDialog将layout作为内容,比如: public void showDialog() { final AlertDialog dlg = new AlertDialog.Builder( DialogActivity.this) .create(); dlg.show(); Window window =

js里写一个当前页面弹出登陆框,用来输入用户名和密码并传到另一个页面的方法,求相助!

问题描述 js里写一个当前页面弹出登陆框,用来输入用户名和密码并传到另一个页面的方法,求相助! 解决方案 纯js拼页面--那就在table外面拼个form,加上action等属性 form里再加submit的input点击input,form直接提交到后台,自己后台处理跳转:想直接跳,那就js拿到用户名和密码,直接url带参数传过去window.location.href=""跳转页面?用户名=值&密码=值""

如何将页面数据传到弹框里的文本框中

问题描述 如何将页面数据传到弹框里的文本框中 点击修改按钮 弹出一个弹框 里面有文本框 如何将要修改的那一行的信息传到文本框里 要弹框一出现就自动加载在里面的 解决方案 http://www.jb51.net/article/50817.htm 解决方案二: http://www.shangxueba.com/jingyan/1904428.html 解决方案三: 可以用artDialog控件实现,具体使用你可以百度搜索artDialog的使用 解决方案四: 可以用artDialog控件实现,具

急急急 asp.net 修改密码页面 按提交按钮后,数据库密码已经修改,但网页弹框提示修改失败

问题描述 非常急,求助大家我在做一个网站修改用户密码页面按提交按钮后弹框说我修改失败但是在数据库里查看用户密码已经被修改 解决方案 解决方案二:那要看你的判断语句是怎样写的.解决方案三:就你这句话没人知道原因,代码呢--解决方案四:页面判断数据库sql语句执行成功代码错误.解决方案五:要么就是提示打错字了.解决方案六:有代码没,帮你看看解决方案七:这个一看就是你写判断地方的问题.仔细看看解决方案八:没码说个卵

webbrowser,打开新页面弹出缺少对象的提示框,怎么禁用

问题描述 webbrowser,打开新页面弹出缺少对象的提示框,由于我使用的一些下载的本地网页,没有图片等内容,提示框非常多,挨个点很麻烦.寻求一种解脱-- 解决方案 解决方案二:哦,是不是给分太少了--解决方案三:有个属性,设一下就可以了.解决方案四:吐血!我知道是哪个属性就不问了!解决方案五:wb.ScriptErrorsSuppressed=false;解决方案六:IE选项--高级--禁用脚本调试解决方案七:引用4楼jinjazz的回复: wb.ScriptErrorsSuppressed

不出现弹框-求教大神,怎么用JS阻止页面跳转??

问题描述 求教大神,怎么用JS阻止页面跳转?? 求教大神,怎么用JS阻止页面跳转??现在想到的就是用onbeforeunload事件,但是会默认弹出弹框,这样用户体验不好,能不能不出现弹框,就阻止页面跳转? 解决方案 只有window.onbeforeunload可以阻止,但是得由浏览器控制 解决方案二: window.onbeforeunload = function(){ return '你确定要关闭吗?'; } 解决方案三: 下面这段话重写,把弹框的部分去掉什么都不做.你可以试一下. wi

页面弹出一个提示框,menu的样式改变

问题描述 各位大侠:我在页面放置了一个menu控件,原来的格式是横着的,但是从页面弹出一个提示框后,menu内容变为竖直的,点击确定提示框后恢复正常.怎么改啊? 解决方案 解决方案二:附上图片[img=http://hi.csdn.net/space-10244376-do-album-picid-1004227.html][/img][img=http://hi.csdn.net/space-10244376-do-album-picid-1004227.html][/img]解决方案三:解决

前端最好用弹框组件-layer

layer是一款近年来备受青睐的web弹层组件,它甚至兼容了包括IE6在内的所有主流浏览器;而且layer采用MIT开源许可证,将会永久性提供无偿服务.现在你肯定对layer充满了兴趣,首先,了解layer肯定避不开layui,layui是一个集合多个组件,例如:layer/laypage/laydate等的前端框架,和Bootstrap是同类别的,而layer一直是layui的代表作.如果舍弃layui单独使用layer的话,他需要依赖于jq1.8以上版本引入:废话不多说,直接能进入layer

用jquery中插件dialog实现弹框效果实例代码_jquery

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu