Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

【解决方案】页面静态化之路径问题解决方案 #78

Closed
zhongxia245 opened this issue Feb 23, 2017 · 0 comments
Closed

【解决方案】页面静态化之路径问题解决方案 #78

zhongxia245 opened this issue Feb 23, 2017 · 0 comments

Comments

@zhongxia245
Copy link
Owner

时间：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

<html>
    <head>
        <base href="/test/demo/"/>
        <link type="stylesheet" href="index.css"/>
    </head>
    ...
    ...
</html>

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

三、 base 标签

base标签放在 head标签 中

将相对路径变成绝对路径

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

批量设置target=_blank

  1. 当需要对一个页面下的所有链接都加上target='_blank'属性时，加上标签即可
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@zhongxia245