利用iframe嵌入页面，实现父子页面交互

父页面代码如下：

<%@ 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(“老王”);

说明：这种父子页面之间的操作，也适合父页面弹出子页面式的父子页面关系

利用iframe嵌入页面，实现父子页面交互

猜你喜欢