安卓Chrome运行本地HTML无法加载同目录外部CSS/JS文件
问题根因
安卓Chrome对file://协议做了安全限制,默认禁止本地HTML文件加载同路径下的外部CSS、JS资源,和你之前尝试的相对路径写法无关。
另外你当前代码里用的/pali.css、/palindrome.js是根路径写法,会指向设备存储根目录,不可能匹配到同文件夹下的文件,首先要把路径改回无前置斜杠的相对格式:href="pali.css"、src="palindrome.js"。
解决方案
- 本地启动静态HTTP服务访问
不要直接打开本地HTML文件,在项目目录启动静态服务后,通过http://localhost:端口号的HTTP地址访问页面,就不会触发file协议的安全限制。安卓端可以用支持本地静态服务的文件类、服务器类APP实现,不需要额外电脑设备。 - 内联所有外部资源
不想搭建服务的话,直接把CSS、JS代码内联到HTML文件中,不需要外部引用:- 把
pali.css的全部内容复制到HTML头部的<style>标签内 - 把
palindrome.js的全部内容复制到页面底部的<script>标签内
调整后的代码结构参考:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Palindrome Checker</title> <style> /* pali.css 内容全部放这里 */ </style> </head> <body> <h1>Palindrome Checker</h1> <div class="main"> <div class="holder"> <div class="bgimg"> <span>Type in here-</span> <input type="text" name="textin" label ="textin" id="Udt1" placeholder="Eg-Racecar"> <button class="btn" onclick="tex()">Check</button> </div> </div> <span class="anshold"><p id="udans"></p></span> </div> <script> // palindrome.js 内容全部放这里 </script> </body> </html> - 把
- 更换浏览器
部分安卓端浏览器没有对file协议做资源加载限制,比如火狐安卓版,可以直接打开本地HTML正常加载同目录资源。
内容的提问来源于stack exchange,提问作者coddein
相关产品推荐
相关产品推荐

