php 加载css文件,PHP:如果正确加载js、css、images等静态文件

当静态页面被放入框架或转移时,原URL引用的JS、CSS和图片会失效。解决方法是使用相对路径而非绝对路径,并利用$_SERVER全局变量获取相对路径。定义常量ROOT_PATH为项目相对路径,通过 dirname($_SERVER['SCRIPT_NAME']) 获取框架名称位置,然后拼接静态文件路径。这样即使文件在不同电脑上,也能根据$_SERVER动态获取路径,确保资源正确加载。
摘要由CSDN通过智能技术生成

日常中,我们想要把一些静态页面放在框架上或者是进行转移时,那么静态页面上的原url加载js、css、images都会失效,那么我们应该怎么进行修改捏?

现在仓鼠做个笔记哈

这里有几个注意项:

1、路径必须要绝对正确,基于项目之后的js、css文件位置路径必须是绝对路径

(例如项目的位置在D://studys/aa/bb下,项目名称是cc,js文件路径是D://studys/aa/bb/cc/public/js/dd.js,那么加载路径应该是aa/public/js/dd.js)

2、不要用绝对路径!!不要用绝对路径!!不要用绝对路径!!

(因为用绝对路径,将文件放在其他电脑上后,js、css这些文件一样加载不出来,因为我们存放php文件的系统盘非常有可能不一样)

3、当我们使用相对路径的时候,要善于使用$_SERVER这个全局变量去获取,一般加载这些文件使用的是dirname($_SERVER['SCRIPT_NAME'])

($_SERVER['SCRIPT_NAME']获取的是inde.php入口文件的相对位置,这里dirname()是指相对于inde.php上一个路径)

(例如$_SERVER['SCRIPT_NAME']得到的结果是:aa/bb/cc/index.php,那么dirname($_SERVER['SCRIPT_NAME']得到的结果是:aa/bb/cc,这个结果一般截取到的是框架名称位置——Index.php最终位置在框架文件夹下)

(这时候,我们再根据得到的结果,和我们放置js、css文件位置,进行一个拼接,就能得到我们访问js、css文件的相对路径)

例子:

原静态页面中,加载js、css、images的路径为:

46cae913b7d8e6f82747c74ce5112c64.png

当我们放进框架后,加载这个静态文件,发现样式和图片都失效了,全页面变得乱七八糟

f705a4178b77fe7ca0bd763468cac553.png

这时候,我们只要将正确的加载js、css的路径进行修改,就能读取到啦

1、查看我们JS、CSS、Images置放位置

bd1f54e3c7d1413221480e4f2628a2ab.png

abe689138806b6620ef187f2f7ac1c2b.png

从上面我们可以看到:JS、CSS等文件,是在v1.0.2/thinkmimi/public/下

2、再定义常量,获取项目的相对路径

#相对于浏览器的项目根目录地址-用于加载静态文件

defined('ROOT_PATH') or define('ROOT_PATH', stripslashes(dirname($_SERVER['SCRIPT_NAME'])));

根据上面的文件,我们可以得出,ROOT_PATH得到的相对路径为:/studys/TWO/v1.0.2,从这个路径中,我们得出,v1.0.2是整个框架的名称

3、最后进行url拼接

267803332d0baffd61e304c53ffcc96f.png

这时候,我们进行访问,就能正确加载到我们的静态文件啦

fd14f1869b4e37fa6abf62dd25fb3a47.png

我们打开审查元素,查看JS、CSS等文件生成的URL

8ea5533ffc35322412a673fea7590381.png

可以看到,加载的最终结果都是相对路径,即使文件放在其他电脑上,系统也会根据$_SERVER去获取此框架在该电脑中的相对路径的

以上

END

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值