#002 页面静态化之路径问题解决方案

时间：2017-02-23 12:10:35
作者：zhongxia

一、背景

由于网站的内容都是动态生成的，地址链接也是很有指向性，比如把页面的id保存在地址里面。

http://www.xxx.com/test/demo/show.php?id=1000

这样最终展示给用户是不好的，并且容易被爬虫抓取数据，也不安全。

然后公司就对页面做了简单的静态化处理（伪静态化）
地址变成了

http://www.xxx.com/page/1000.html

说白了，就是把id当成文件名。

但是这样问题就来了， 因为 本来 show.php 文件用到的资源文件都是写成相对路径的，并且资源文件都在 show.php 所在的目录下。

访问伪静态化后生成的HTML文件，那么就存在 加载资源文件路径不对的问题。

# 未伪静态化前
http://www.xxx.com/test/demo/show.php?id=1000

# 资源加载路径
http://www.xxx.com/test/demo/index.css
http://www.xxx.com/test/demo/index.js

# 伪静态化后
http://www.xxx.com/page/1000.html

# 加载的资源文件路径
http://www.xxx.com/page/index.css
http://www.xxx.com/page/index.js

# Error ,找不到该资源文件。报错

二、如何解决

2.1 资源引用路径从相对路径改成绝对路径

解决方案有两个，把所有的资源文件，从相对路径改成绝对路径（基于根目录的路径也可以）

# 替换掉这种的路径
test/demo/index.css
./test/demo/index.css

# 替换成, 从根目录开始算的路径
/test/demo/index.css

# 或者, 绝对路径
http://www.xxx.com/test/demo/index.css

2.2 HTML的 base标签

如果引入的资源都是在 show.php 页面的目录下。所有资源文件都在一个目录下的话。 那么你就可以考虑树勇 base 标签来实现。

限制条件

1. 所有资源都在一个目录下
2. 页面功能复杂，各种文件引用非常多，修改量大

如果以上两点满足了，那么我们继续往下看， 看看base怎么用。

show.php

    
        
        
    
    ...
    ...

这样加载资源的时候，就会去 /test/demo/index.css 路径来获取。

三、 base 标签

base标签放在 head标签 中

将相对路径变成绝对路径

1. 这个对于需要借(chao)鉴(xi)别人网页的时候特别有用~

批量设置target=_blank

2. 当需要对一个页面下的所有链接都加上target='_blank'属性时，加上标签即可