页面间嵌套的3种方法总结

最新推荐文章于 2025-03-26 13:30:00 发布

闲时一笔

最新推荐文章于 2025-03-26 13:30:00 发布

阅读量2w

点赞数 7

分类专栏：笔记前端文章标签： html css jquery javascript

本文链接：https://blog.csdn.net/qq_45682379/article/details/107178652

版权

笔记同时被 2 个专栏收录

3 篇文章

订阅专栏

前端

1 篇文章

订阅专栏

直接奔主题： (～￣▽￣)～

1.介绍三个页面嵌套的方法

1.通过iframe标签来为网页嵌套页面（JSP和HTML均适用）：
代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>页面嵌套</title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
	</head>
	<body>
		<!-- 导航栏目header位置 -->
		<iframe src="header.html" width="100%" height="80" scrolling="no" frameborder="no"></iframe>
		<div id="content">我是content</div>
		<!-- 结尾footer位置 -->
		<iframe src="footer.html" width="100%" height="80" scrolling="no" frameborder="no"></iframe>
	</body>
</html>

（1）width：外部页面的宽度,100%，应该能看懂
（2）height：外部页面的高度,80px，这也是可以的
（3）scrolling：是否有滚动条
（4）frameborder：是否有边框
（5）src=" 地址" 引用外部html

2.利用ajax也是可以把不同的网页代码嵌入到自己的网页。（JSP和HTML均适用）
代码入下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>页面嵌套</title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
	</head>
	<body>
		<!-- 导航栏目header位置 -->
		<div id="head"></div>
		<div id="content">我是content</div>
		<!-- 结尾footer位置 -->
		<div id="foot"></div>
	</body>
	<script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		// 这是header
		$.get("header.html",function(data){
			$('#head').html(data);
		});
		//这是footer
		$.get("footer.html",function(data){
			$('#foot').html(data);
		});
	</script>
</html>

（1）首先要把Jquery导入页面中，这个想必聪明的你应该知道；
（2）在想嵌入的网页位置加上div标签，用id选择器标识
（3）放在script内部，这段代码效果是：
$.get(“header.html”,function(data){
$(’#head’).html(data);
});
拿出header.html页面的内容，随后嵌入到id为head的div标签的内部。

浏览器右键检查（和预想的一致）
在这里插入图片描述
3.利用<%@include file=“XXXXX.jsp”%>。（仅JSP均适用）
代码入下：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>页面嵌套</title>
  <link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
<!-- 导航栏目header位置 -->
<%@include file="header.jsp"%>
<div id="content">我是content</div>
<!-- 结尾footer位置 -->
<%@include file="footer.jsp"%>
</body>

</html>