Web页面相同部分提取小技巧

迈不过友情╰ 2022-12-15 11:15 230阅读 0赞

Hello,I'm Shendi

--------------------

最近在写 Web 页面,期间难免有很多页面共用同一块元素

例如 导航栏,底部版权信息等

实现此效果有多种方法

**目录**

为了方便测试,首先创建六个html页面

使用 frameset 元素

直接在每个页面中增加

使用 iframe 元素

使用ajax的方式

使用 script 的方式

--------------------

# 为了方便测试,首先创建六个html页面 #

**这里演示的是提取相同部分,所以页面的美化不是重点**

分别为

1.  head.html(头部导航栏)
2.  left.html(左侧导航栏)
3.  body.html(内容部分)
4.  bottom.html(底部版权信息)
5.  index.html(主界面)
6.  forward.html(跳转界面)

--------------------

# 使用 frameset 元素 #

这个也是比较简单的一种,但是有一些局限性

因为此元素将一个页面拆分成多个页面,更改的页面通常只有内容部分,并且页面对应的url也暴露了

据说此元素已经过时了,所以这里不推荐使用此方法

此元素的具体使用可以直接进入w3c学习,这里提供个链接

[https://www.w3school.com.cn/tags/tag\_frameset.asp][https_www.w3school.com.cn_tags_tag_frameset.asp]

下面举个此元素的例子

*  head.html
    
        <!DOCTYPE html>
        <html>
        	<head>
        		<title>头部导航栏</title>
        	</head>
        	<body style="margin: 0; width: 100%; height: 30px;background: black; color: white;">
        		我是头部导航栏
        	</body>
        </html>
 *  bottom.html
    
        <!DOCTYPE html>
        <html>
        	<head>
        		<title>底部版权信息</title>
        	</head>
        	<body style="margin: 0; width: 100%; height: 30px;background: black; color: white;">
        		Made in Shendi
        	</body>
        </html>
 *  body.html
    
        <!DOCTYPE html>
        <html>
        	<head>
        		<title>内容部分</title>
        	</head>
        	<body style="margin: 0;">
        		提取网页共同部分
        		
        		<a href="forward.html" target="center">点我跳转界面</a>
        	</body>
        </html>
 *  forward.html
    
        <!DOCTYPE html>
        <html>
        	<head>
        		<title>跳转部分</title>
        	</head>
        	<body style="margin: 0;">
        		除了我,其余的一成不变
        	</body>
        </html>
 *  left.html
    
        <!DOCTYPE html>
        <html>
        	<head>
        		<title>侧边导航栏</title>
        	</head>
        	<body style="margin: 0;">
        		我是侧边导航栏
        	</body>
        </html>
 *  index.html
    
        <!DOCTYPE html>
        <html>
        	<head>
        		<title>Web页面提取相同部分测试</title>
        		<meta charset="utf-8"/>
        	</head>
        	<frameset rows="30, *, 30">
        		<frame src="head.html">
        		<frameset cols="30, *">
        			<frame src="left.html" />
        			<frame name='center' src="body.html" />
        		</frameset>
        		<frame src="bottom.html" />
        	</frameset>
        </html>

**效果如下**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA2OTY2_size_16_color_FFFFFF_t_70][]

点击链接后

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA2OTY2_size_16_color_FFFFFF_t_70 1][]

其中的样式,比如说中间的分割线等都可以通过css进行调整

--------------------

# 直接在每个页面中增加 #

这个是最直接,最暴力的方法,讲这个是给下面的方法做对比

直接将共用部分,复制到对应页面......

这样做的后果是,增加服务器压力,页面难以维护,还有一些请细品

--------------------

# 使用 iframe 元素 #

这个也比较简单,直接使用元素,用的地方也很多

此方法与 直接在每个页面中增加 代码相似

不同的是,不再是将代码直接复制到对应页面,而是将代码提取成一个html文件,在每个页面中进行引入

在使用的时候会需要根据自己的需求来设置iframe的大小

> 等价于内嵌页面
> 
> 关于iframe的使用方法也在w3c中有,直接百度iframe就可以查到

举栗子,这里直接舍弃之前的body.html页面,head与bottom以及left不变

index.html如下

<!DOCTYPE html>
    <html>
    	<head>
    		<title>Web页面提取相同部分测试</title>
    		<meta charset="utf-8"/>
    	</head>
    	<body style="margin: 0;">
    		
    		<iframe style="border: none; display: inherit; width: 100%; height: 30px;" src="head.html"></iframe>
    		<iframe style="border: none; display: inherit; float: left; width: 30px; background: red;" src="left.html"></iframe>
    		我是内容<a href='forward.html'>跳转</a>
    		<iframe style="border: none; width: 100%; height: 30px;" src="bottom.html"></iframe>
    	</body>
    </html>

forward.html 如下

<!DOCTYPE html>
    <html>
    	<head>
    		<title>跳转部分</title>
    	</head>
    	<body style="margin: 0;">
    		
    		<iframe style="border: none; display: inherit; width: 100%; height: 30px;" src="head.html"></iframe>
    		<iframe style="border: none; display: inherit; float: left; width: 30px; background: red;" src="left.html"></iframe>
    		跳转的界面,其余的等价于从缓存中取
    		<iframe style="border: none; width: 100%; height: 30px;" src="bottom.html"></iframe>
    	</body>
    </html>

效果如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA2OTY2_size_16_color_FFFFFF_t_70 2][]

点击后,整个页面刷新,共有部分是直接从缓存中取的

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA2OTY2_size_16_color_FFFFFF_t_70 3][]

这种方法已经差不多ok了,但是iframe是一个独立的东西,所以我们需要给它设置样式,以至于在每一个页面都需要设置

--------------------

# 使用ajax的方式 #

我们可以通过ajax获取到对应 html 页面的内容,然后将其放到页面

这种方式难免也会增加服务器的压力,与直接复制不同,使用ajax的方式只更改页面内容,而不是跳转页面,这样也能实现

因为在 js 中,所以安全性较之前的高一点

此种方法在某些网站上使用... 不过我不推荐这种

因为使用这种方法会使得 js很庞大,用户长时间停留在一个页面

以及各种各样的问题

> 比如前后端分离的项目使用ajax出现跨域问题,html页面中有js的话则需要用js去执行js等

此种方法这里不举例子了

--------------------

# 使用 script 的方式 #

我们如果需要页面跳转,并且有一部分是相同的,那么使用 script 的方式是比较好的

我们将html提取出来,使用js的方式进行输出...

与 iframe 差不多,只需要在每一个页面对应的部分引入此js就ok了

举栗子

我们需要将页面都做成js, index和forward页面除外,排除掉body页面

> **需要注意的是,我们使用此方法是直接将代码融合成一个页面,所以我们提取的html要去掉一些不必要的标签**
> 
> **比如说<html><head><body>等**
> 
> **并且提取出来的html应带有样式**

这里可以使用一些在线网站上的转换

例如 [http://www.jsons.cn/jstohtml/][http_www.jsons.cn_jstohtml]

我们为了方便调试样式,可以先将提取的html合并起来,放到index.html中

调整好后代码和效果如下

<!DOCTYPE html>
    <html>
    	<head>
    		<title>Web页面提取相同部分测试</title>
    		<meta charset="utf-8"/>
    	</head>
    	<body style="margin: 0;">
    		<div style="width: 100%; height: 30px;background: black; color: white;">
    			我是头部导航栏
    		</div>
    		<div style="float: left; width: 30px; background: red;">
    			我是侧边导航栏
    		</div>
    		我是内容
    		<div style="width: 100%; height: 30px;background: black; color: white; float: left;">
    			Made in Shendi
    		</div>
    	</body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA2OTY2_size_16_color_FFFFFF_t_70 4][]

然后我们将每一块提取出来,放到对应html文件中,或者直接做成js文件(这里直接做成js文件)

于是

> head.js
> 
>     document.writeln("<div style=\"width: 100%; height: 30px;background: black; color: white;\">");
>     document.writeln("	我是头部导航栏");
>     document.writeln("</div>");
> 
> bottom.js
> 
>     document.writeln("<div style=\"float: left; width: 100%; height: 30px;background: black; color: white;\">");
>     document.writeln("	Made in Shendi");
>     document.writeln("</div>");
> 
> left.js
> 
>     document.writeln("<div style=\"float: left; width: 30px; background: red;\">");
>     document.writeln("	我是侧边导航栏");
>     document.writeln("</div>");

接着只需要在页面中在对应位置引入js即可

index.html

<!DOCTYPE html>
    <html>
    	<head>
    		<title>Web页面提取相同部分测试</title>
    		<meta charset="utf-8"/>
    	</head>
    	<body style="margin: 0;">
    		<script type="text/javascript" src="head.js"></script>
    		<script type="text/javascript" src="left.js"></script>
    		我是内容<a href='forward.html'>点我跳转</a>
    		<script type="text/javascript" src="bottom.js"></script>
    	</body>
    </html>

forward.html

<!DOCTYPE html>
    <html>
    	<head>
    		<title>跳转部分</title>
    	</head>
    	<body style="margin: 0;">
    		<script type="text/javascript" src="head.js"></script>
    		<script type="text/javascript" src="left.js"></script>
    		页面跳转后,除了我,其余的一成不变
    		<script type="text/javascript" src="bottom.js"></script>
    	</body>
    </html>

效果如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA2OTY2_size_16_color_FFFFFF_t_70 5][]

点击后

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA2OTY2_size_16_color_FFFFFF_t_70 6][]

--------------------

**如果觉得有用三连一下再走吧~**

[https_www.w3school.com.cn_tags_tag_frameset.asp]: https://www.w3school.com.cn/tags/tag_frameset.asp
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA2OTY2_size_16_color_FFFFFF_t_70]: /images/20221123/619cfc4363434a3daf085713156d645e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA2OTY2_size_16_color_FFFFFF_t_70 1]: /images/20221123/1550ac830dcf4738890b56ef0e5f2ec3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA2OTY2_size_16_color_FFFFFF_t_70 2]: /images/20221123/6eb37c86793645fa8d4f899346bdaed6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA2OTY2_size_16_color_FFFFFF_t_70 3]: /images/20221123/248abf7808a5475d971f5a86ae6d65a6.png
[http_www.jsons.cn_jstohtml]: http://www.jsons.cn/jstohtml/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA2OTY2_size_16_color_FFFFFF_t_70 4]: /images/20221123/43b126f811814576a7bffbbf4723a296.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA2OTY2_size_16_color_FFFFFF_t_70 5]: /images/20221123/66ed998a9ad44c60865292a21cc2d132.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA2OTY2_size_16_color_FFFFFF_t_70 6]: /images/20221123/0dcbc6e161914d11a183137887489622.png