index页面
<!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>Document</title>
</head>
<body>
<div class="main"></div>
<!-- 引入jquery -->
<script src="./jquery-3.5.1.min.js"></script>
<!-- 引入demo.js -->
<script src="./demo.js"></script>
</body>
</html>
抽离的公共页面
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
js页面
$(document).ready(function () {
$('.main').load('./test.html')
})
目录结构
报错内容![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/16a3dc84116179dff8b9701753242def.png)
处理
关于load方法是可以读取本地的文件,进行添加到所需要显示的地方,但是有一个弊端就是,如果使用load方法读取了本地文件,如果不是在服务器内请求的话,会提醒跨域,这时我们需要临时搭建一个本地服务器,把代码放进去就可以解决跨域的问题了。
利用phpstudy软件
效果如下:
拓展
<!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>Document</title>
</head>
<body>
<!-- html抽离公共代码的相关方法 -->
<!-- 1.jq项目利用load方法 -->
<!-- csdn相关链接:https://blog.csdn.net/rfalcon/article/details/113931812 -->
<!-- <div class="main"></div>
<script src="./jquery-3.5.1.min.js"></script>
<script src="./demo.js"></script> -->
<!-- 2.es6的embed标签 -->
<!-- <embed src="test.html" type="text/html"> -->
<!-- 3.使用object -->
<object style="border:0px" type="text/x-scriptlet" data="test.html" width=100% height=auto></object>
</body>
</html>