页面嵌套的实现

最新推荐文章于 2024-06-04 14:32:38 发布

tomorrownan

最新推荐文章于 2024-06-04 14:32:38 发布

阅读量2.9k

点赞数 1

分类专栏：前端文章标签： iframe html

本文链接：https://blog.csdn.net/w1418899532/article/details/89306517

版权

向客户展示系统输出的状态文件时，需要切换不同的URL到不同的页面，这样比较麻烦。于是想到只打开一个页面，然后在这个页面点击相应按钮显示对应的页面，即页面嵌套。
我是使用<iframe>元素实现的，且不说<iframe>能耗高，安全性太差这些缺点，就它的功能来说是很强大的。

这里实现的是嵌套三个html页面，公司状态文件比较复杂，这里我写了三个简单的表格文件嵌入页面，下面红黄蓝表格分别是三个外部的html文件。
在这里插入图片描述

1.介绍

HTML内联框架元素 <iframe> 表示嵌套的浏览上下文，可以有效地将另一个HTML页面嵌入到当前页面中。
提示：HTML 与 XHTML 之间的差异：在HTML4.1 Strict DTD和XHTML1.0 Strict DTD中，不支持iframe元素。
可以把需要的文本放置在<iframe>和</iframe>之间，这样就可以应对无法理解iframe的浏览器。

2.页面嵌套实现

主页面index.html文件代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" http-equiv="refresh" content="1800">
	<title>质量监控系统状态文件</title>
</head>
<style type="text/css">
	body{
     
		padding: 0px;
		margin: 0px;
	}
	.btn{
     
		height: 50px;
		margin-left: 75px;
	}
	.btn button {
     
	    line-height: 3

最低0.47元/天解锁文章

tomorrownan

关注

1
点赞
踩
18

收藏

觉得还不错? 一键收藏
2
评论
页面嵌套的实现

向客户展示系统输出的状态文件时，需要切换不同的URL到不同的页面，这样比较麻烦。于是想到只打开一个页面，然后在这个页面点击相应按钮显示对应的页面，即页面嵌套。我是使用<iframe>元素实现的，且不说<iframe>能耗高，安全性太差这些缺点，就它的功能来说是很强大的。这里实现的是嵌套三个html页面，公司状态文件比较复杂，这里我写了三个简单的表格文件嵌入页面，下面红黄...
复制链接

扫一扫

专栏目录