父页面代码如下:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<title>父页面</title>
<script type="text/javascript">
var projectVar = 'nihai';
$(function(){
$("#submit").click(function(){
//先获取子页面的对象
var contIframe = document.getElementById("contIframe").contentWindow;
//获取子页面的js变量或者对象
var testId = contIframe.testId;
//修改子页面变量
contIframe.testId = “XXX”;
//获取子页面html中的元素
var sonName = contIframe.$("sonName").val();
//修改子页面的元素值
contIframe.$("sonName").val(“xiaowang”);
//调用子页面的方法
contIframe.sonMethod();
//以下代码自定义
});
$("#close").click(function(){
var index=parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
});
})
//父页页面方法
function parentMethod(){
alert(“这是父页面”);
}
</script>
</head>
<body>
<div class="submenu">
<input type="hidden" name="parentName" id="parentName" value="老王">
<div style="width: 98%;height:230px;margin:10px auto;border: 1px solid #cccccc;" id='iframeCont' class='iframeCont'>
<div align="center" style="height: 100%;">
<iframe style="overflow:auto;" width='100%' height='100%' id="contIframe" src="url" frameborder="none" scrolling="auto" ></iframe>
</div>
</div>
<div class="submit_group">
<a href="javascript:;" class="submit" id="submit">确定</a>
<a href="javascript:;" class="cancel" id="close">取消</a>
</div>
</div>
</body>
</html>
子页面代码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<title>父页面</title>
<script type="text/javascript">
var testId = “111”;
$(function(){
$("#submit").click(function(){
//获取父页面的js变量或者对象
var parentVar = parent.parentVar;
//修改父页面的js变量或对象
parent.parentVar = “你好”;
//获取父页面的html元素值
var parentName = parent.$("#parentName").val();
//修改父页面的元素值
parent.$("#parentName").val(“老王”);
//以下代码自定义
});
$("#close").click(function(){
var index=parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
});
})
//子页面方法
function sonMethod(){
alert(“这是子页面”);
}
</script>
</head>
<body>
<div class="submenu">
<input type="hidden" name="sonName" id="sonName" value="xiaoli">
<div class="submit_group">
<a href="javascript:;" class="submit" id="submit">确定</a>
<a href="javascript:;" class="cancel" id="close">取消</a>
</div>
</div>
</body>
</html>
总结:
- 1、如何在父页面嵌入一个子页面
(1)先在父页面写一个iframe,iframe的src属性里面写所要嵌入页面的url地址
<iframe style="overflow:auto;" width='100%' height='100%' id="contIframe" src="https://blog.csdn.net/juligang320" frameborder="none" scrolling="auto" ></iframe>
(2)如果没有初始化src,那么可以通过js设置:
var div = document.getElementById("contIframe");
div.src = "https://blog.csdn.net/juligang320";
- 2、如何从父页面获取和操作子页面元素
//先获取子页面的对象
var contIframe = document.getElementById("contIframe").contentWindow;
//获取子页面的js变量或者对象
var testId = contIframe.testId;
//修改子页面变量
contIframe.testId = “XXX”;
//获取子页面html中的元素
var sonName = contIframe.$("sonName").val();
//修改子页面的元素值
contIframe.$("sonName").val(“xiaowang”);
//调用子页面的方法
contIframe.sonMethod();
- 3、如何从子页面获取和操作父页面元素
//获取父页面的js变量或者对象
var parentVar = parent.parentVar;
//修改父页面的js变量或对象
parent.parentVar = “你好”;
//获取父页面的html元素值
var parentName = parent.$("#parentName").val();
//修改父页面的元素值
parent.$("#parentName").val(“老王”);
说明:这种父子页面之间的操作,也适合父页面弹出子页面式的父子页面关系