爲了避免多頁面情形下的代碼重複,可以利用 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>