利用 load() 方法引入重复代码文件

mn_front

于 2020-04-15 17:54:43 发布

阅读量380

点赞数

CC 4.0 BY-SA版权

分类专栏：其他

本文链接：https://blog.youkuaiyun.com/aa_mmnn/article/details/105540501

其他专栏收录该内容

5 篇文章

订阅专栏

为了避免多页面情形下的代码重复，可以利用 load() 方法，将重复的部分（例如导航栏）放入单独的文件，使用下列方法进行导入：
1、simple.html为导入的文件；
2、避免同源策源，请在服务器端打开；

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0">
  <title>Document</title>
  <style>

  </style>
</head>

<body>
  <div class="include" file="./simple.html"></div>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script>
  $(".include").each(function() {
    if (!!$(this).attr("file")) {
      $(this).load($(this).attr("file"))
    }
  });
  </script>
</body>

</html>