Iframe嵌套操作:点击按钮--》弹出对话框(嵌套iframe)--》取得iframe值,并保存在parent对象中,点击ok--》在原页面取得选中的值
test.jsp(button-->click)-->test1.jsp(iframe -->popup.jsp)
test.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="js/test.js"></script>
</head>
<body>
username:<input name="username" type="text"> <input type="button" name="popup" οnclick="javascript:getNames()">
<form method="post" action="/suite/EditUserAction.do" name="frmEditUser">
<table>
<tr >
<td width="20%" >* Assigned Roles</td>
<td width="80%" colspan="3" >
<input type="hidden" value="" name="defaultRoleID">
<input type="text" style="display:none;" value="" name="forCheckChangeDefRole">
<input type="hidden" value="" name="roleIds">
<table width="100%">
<tbody>
<tr>
<td nowrap="" class="attributeContent" id="showRoleNames"></td>
<td width="100%" id="roleNamesButton">
<input type="button" οnclick="javascript:getNames();" value="..." >
</td>
</tr>
</tbody></table>
</td>
</tr>
</table>
</form>
</body>
</html>
test1.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="js/test.js"></script>
</head>
<body>
用户名<input name="username" type="text"> <input type="button" name="popup">
<iframe width="100%" scrolling="auto" height="1000" frameborder="0" name="assignRoleFrame" src="popup.jsp"></iframe>
</body>
</html>
popup.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<script language="javascript" src="js/open.js"> </script>
<body>
assignRoles:
<input type="text" name="username">
<form action="" name="main" method="post">
<input type="hidden" value="1000" name="companyID">
<table width="100%" cellspacing="1" cellpadding="0" border="0">
<tbody><tr>
<td width="100%" nowrap="" align="left" colspan="2" class="titleHeader">Assign Roles</td>
</tr>
<tr>
<td width="50%" align="left" class="bodyBold"></td>
<td width="50%" align="right">
<input type="button" οnclick="onClickOK();" value="OK" name="" class="button">
<input type="button" οnclick="javascript:top.close()" value="Close" name="" class="button">
</td>
</tr>
<tr>
<td height="2" colspan="2"></td>
</tr>
</tbody></table>
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr class="listViewThS1">
<th width="24%" align="center">Default Role</th>
<th width="76%">Assigned Roles</th>
</tr>
<tr>
<td align="center"><input type="radio" checked="" id="radio0" value="1000" οnclick="selectRadioBox('0');" name="defaultRole" style="width:15;height:15"></td>
<td nowrap="" class="bodyBold">
<img align="textTop" src="/suite/img/roles_t_spacer.gif">
<input type="checkBox" disabled="" checked="" id="check0" value="1000" name="selectRoles" style="width:15;height:15">
Company Administrator
</td>
<input type="hidden" id="roleName0" value="Company Administrator" name="roleName">
</tr>
<tr>
<td align="center"><input type="radio" id="radio1" value="1010" name="defaultRole" οnclick="selectRadioBox('1');" style="width:15;height:15"></td><
td nowrap="" class="bodyBold">
<img align="textTop" src="/suite/img/roles_t_spacer.gif">
<input type="checkBox" id="check1" value="1010" name="selectRoles" style="width:15;height:15">
<input type="hidden" id="roleName1" value="dev" name="roleName">
</td></tr>
<tr><td align="center"><input type="radio" id="radio2" value="1011" name="defaultRole" οnclick="selectRadioBox('2');" style="width:15;height:15"></td><td nowrap="" class="bodyBold">
<img align="textTop" src="/suite/img/roles_l_spacer.gif">
<input type="checkBox" id="check2" value="1011" name="selectRoles" style="width:15;height:15">
qa
<input type="hidden" id="roleName2" value="qa" name="roleName">
</td></tr>
</tbody></table>
</form>
</body>
</html>
test.js
function getNames(){
var properties = 'toolbar:no;menubar:no;scrollbars:no;resizable:no;dialogHeight:550px;dialogWidth:480px';
var url = "/test/test1.jsp";
var DialogArgument = new Object();
DialogArgument["src"] = url;
DialogArgument["title"] = "Assigned Roles";
var oValue = showModalDialog(url, DialogArgument, properties);
if(oValue!=null){
$("input[name=defaultRoleID]").val(oValue.defaultRole);
$("input[name=roleIds]").val(oValue.roleIds);
$("input[name=username]").val(oValue.roleNames);
var button=document.getElementById("roleNamesButton").innerHTML;
document.getElementById("roleNamesButton").innerHTML=oValue.roleNames+button;
}
return true;
}
function SaveObjParent(returnValue,obj){
window.parent.returnValue=obj;
}
open.js
function selectRadioBox(id){
document.getElementById("check"+id).checked=true;
document.getElementById("check"+id).disabled=true;
var checkbox=document.getElementsByName("selectRoles");
for(var i=0;i<checkbox.length;i++){
if(i!=id)
checkbox[i].disabled=false;
}
}
function onClickOK(){
var returnRoles=new Object();
var returnValue;
var onSelectedRadio=document.getElementsByName("defaultRole");
var selectRoleId=document.getElementsByName("selectRoles");
var selectRoleName=document.getElementsByName("roleName");
var roleIds="";
var roleNames="";
var defaultRoleID="";
var j=0;
for(var i=0;i<onSelectedRadio.length;i++){
if(onSelectedRadio[i].checked){
defaultRoleID=onSelectedRadio[i].value;
roleIds=selectRoleId[i].value+roleIds;
roleNames=selectRoleName[i].value+"(<font color='red'>Default</font>)"+roleNames;
}
else if(selectRoleId[i].checked){
roleIds=roleIds+","+selectRoleId[i].value;
roleNames=roleNames+","+selectRoleName[i].value;
}
}
if(defaultRoleID==""){
alert("Please select default role.");
return;
}
returnRoles.defaultRole=defaultRoleID;
returnRoles.roleIds=roleIds;
returnRoles.roleNames=roleNames;
var obj=returnRoles;
window.parent.SaveObjParent(returnValue,obj);
window.parent.close();
}
