一、需求及场景
通过iframe标签实现父子页面的嵌套，多用于部分内容共用的多页面，常见于某系统的头和尾共用
示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。
二、了解iframe
（1）iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。目前所有浏览器都支持 标签。
（2）iframe 元素常见语法
<iframe id="" class="" name="" height="" width="" src="" frameborder="" data-id="" seamless></iframe>
（3）iframe 元素中的属性介绍
1、id、class、height和width：与我们平常使用的无异，常用于获取元素, 方便对iframe样式的控制
2、name：为了在按钮或者链接点击的时候可以通过target属性=iframe的name属性来控制iframe的的渲染哪一个(iframe的src属性)页面
3、src的值表示页面刚加载的时候iframe内要显示的内容(通过target可以动态改变的)
4、frameborder：规定是(1)否(0)显示 iframe周围的边框，frameborder="0"是告诉iframe的边框为0
5、 data-id：自定义了一个data-id的属性,可以通过js获取到它的值。只是行内存放数据的一个标签，跟input里面的value作用是一样的，同时在HTML5 中增加了一项新功能是 自定义数据属性 ，也就是 data-* 自定义属性。在HTML5中我们可以使用以 data- 为前缀来设置我们需要的自定义属性，来进行一些数据的存放
6、 seamless 属性属于逻辑属性。当设置该属性后，它规定了 <iframe> 看上去像是包含文档的一部分（无边框或滚动条）
三、代码实现
1.后台代码
代码如下（示例）：
package test.controller;
import javax.servlet.http.HttpServletRequest;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
@RequestMapping("/test")
public class TestController {
@RequestMapping(value = "/parent")
public String parent(HttpServletRequest request, Model model) {
return "parent";
}
@RequestMapping(value = "/children")
public String children(HttpServletRequest request, Model model) {
return "children";
}
@RequestMapping(value = "/daughter")
public String daughter(HttpServletRequest request, Model model) {
return "daughter";
}
@RequestMapping(value = "/son")
public String son(HttpServletRequest request, Model model) {
return "son";
}
}
2.前台代码
（1）、父页面
通过menu方法来控制src值的改变：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>嵌套父页面</title>
<script type="text/javascript" src="js/jquery-2.1.1.js"></script>
<style type="text/css">
#head {
height: 300px;
width: 100%;
background-color: green;
text-align: center;
color: #fff;
font-size: 20px;
}
#foot {
height: 300px;
width: 100%;
background-color: blue;
text-align: center;
color: #fff;
font-size: 20px;
}
</style>
</head>
<body>
<div id="head">这是共用头<br>
<button onclick="menu(1)">children菜单</button>
<button onclick="menu(2)">daughter菜单</button>
<button onclick="menu(3)">son菜单</button>
</div>
<iframe id="iframe0" class="J_iframe content" name="iframe0" height="400px" width="100%" src="/TestModel/test/son" frameborder="0" data-id="" seamless></iframe>
<div id="foot">这是共用尾</div>
<script type="text/javascript">
function menu(str){
var src="/TestModel/test/children";
if(str=='1'){
src="/TestModel/test/children";
}else if(str=='2'){
src="/TestModel/test/daughter";
}else if(str=='3'){
src="/TestModel/test/son";
}
$("#iframe0").attr("src", src);
}
</script>
</body>
</html>
(2)、子页面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>嵌套子页面</title>
</head>
<body>
<h1>这是是son页面</h1>
</body>
</html>
子页面内容一致，不做赘述，详情参考图示：
3.实现效果
到此，一个简单的父子共用部分内容已实现
1013
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
