页面嵌套的实现
程序员文章站
2022-05-29 15:23:39
...
向客户展示系统输出的状态文件时，需要切换不同的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: 30px; width: 120px; margin: 5px; } #aaa{ width: 99%; height: 800px; } </style> <body> <div class="btn"> <button onclick="changeto('App')">App</button> <button onclick="changeto('Bcp')">Bcp</button> <button onclick="changeto('newApp')">newApp</button> </div> <!-- //设置页面初始化时显示的页面 --> <iframe src="D:\webfront\jsnext\App.html" id="aaa" onload="init()"></iframe> <script type="text/javascript"> //按钮切换功能实现 function changeto(name){ frame = document.getElementById('aaa'); //获取要嵌套页面的文件名 frame.src = "D:\\webfront\\jsnext\\"+name+'.html'; } //页面初始化功能实现 function init(name){ frame = document.getElementById('aaa'); //设置窗口高度 frame.hight = document.body.clientHeight-30; } </script> </body> </html> -
嵌套的子页面App.html实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> table{ width: 90%; height: 800px; margin: 0 auto; background: yellow; } </style> </head> <body> <table border="1"> <tr> <td>1111</td> <td>2222</td> <td>3333</td> <td>4444</td> </tr> <tr> <td>1111</td> <td>2222</td> <td>3333</td> <td>4444</td> </tr> <tr> <td>1111</td> <td>2222</td> <td>3333</td> <td>4444</td> </tr> <tr> <td>1111</td> <td>2222</td> <td>3333</td> <td>4444</td> </tr> </table> </body> </html> -
嵌套的子页面Bcp.html、newApp.html实现
子页面Bcp.html、newApp.html代码同App.html页面代码，只是表格中内容发生改变，背景颜色发生变化，用于区分不同页面的显示效果。
实现结果为：
每天进步一点点、充实一点点、快乐一点点、加油！