关于JQuery的load方法无法加载script的问题探讨

虚幻同学

已于 2023-01-06 18:49:17 修改

阅读量1.5k

点赞数

分类专栏： web 文章标签： js javascript jquery web html5

于 2020-02-03 19:06:32 首次发布

本文链接：https://blog.csdn.net/qq_32098189/article/details/104159037

版权

web 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

关于JQuery的load方法无法成功加载script问题的探讨

现在我们有这样一个demo，项目结构为：
文件结构

a.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <script>
            $(function(){
                $("body").load("./b.html")
            });
    </script>
</head>
<body>
    this is a.html
</body>
</html>

b.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="./b.js"></script>
</head>
<body>
    this is b.html
</body>
</html>

b.js

alert("this is b.js");

浏览器运行的成功结果
可以看到这里load方法成功执行了加载script的任务，那么为什么有些程序员会遇到load无法加载的原因呢？我们不妨继续来进行下一步实验。

现在将调整下这个demo项目的文件结构：

并修改以下代码中的路径：

a.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <script>
            $(function(){
                $("body").load("./b/b.html");	//本次修改
            });
    </script>
</head>
<body>
    this is a.html
</body>
</html>

然后我们再运行下结果：
在这里插入图片描述
会发现报了个找不到资源的错误，然而b.html成功被加载到了a.html上，而b.html也的确和b.js为同一层级文件，那么问题出在哪里呢？来看一下下面这张图

可以发现，在这个DOM结构中，属于b.js的<script>节点被加载到了a.html中，那么，src中的相对路径也就成了相对于a.html，即：http://127.0.0.0:3000/src/b.js，然而b.js实际上的路径是http://127.0.0.0:3000/src/b/b.js，这里我们进行一下如下的修改

b.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="./b/b.js"></script>	//本次修改
</head>
<body>
    this is b.html
</body>
</html>

在这里插入图片描述
项目又正常进行了

总结

JQuery的load方法中，被加载的html文件如果存在引用javascript，并且，该路径是相对路径时，最终该相对路径所相对的是负责加载的那个目标节点所在的文件路径。

试调时，可以在开发者工具中查看DOM结构，方便获悉当前结构下<script>对应引用的绝对路径。

虽然我们知道了load方法运用失败的原因，但是这里依旧不建议load一并加载script，假设a.html与b.html同时引用了js，而a.html又load了b.html这将导致b.js被加载了两次，且一个页面中存在两个b.js，会出现很多意想不到的结果。
再者，我们考虑下下面这种情景，当两个不同层级的html都load了某个html，而该html又引用了javascript，那么该html中<script>引用路径写法又何去何从呢，相对于那个路径写呢？