后台管理系統多用到了頁面嵌套頁面的場景，下面是我在工作中解決的方法，利用<object></object>的data屬性，下面試w3c的介紹：
data 屬性用於指定供對象處理的數據文件的 URL。
該屬性的值是文件的 URL，該 URL 可能是相對於文件基本 URL 的絕對 URL 或相對 URL，或者是相對於用 codebase 屬性提供的 URL 的絕對或相對 URL。
瀏覽器通過插入到文檔中的對象類型來決定數據的類型。
該屬性類似於 <img> 標簽中的 src 屬性，因為它下載的是要由包含對象進行處理的數據。當然，它們之間的差別在於，data 屬性允許包含【幾乎任何文件類型】，而不僅僅是圖像文件。
看到中文框標出來的沒，幾乎任何文件！！！就是他了。
上示例代碼：
首先我創建一個new.html文件，內容隨意：
那當然是Hello World 啦！
然后創建index.html
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.top{
width: 100%;
height: 40px;
float: left;
};
.left{
width: 200px;
height: 300px;
background-color: tan;
float: left;
}
.right{
width: 400px;
height: 500px;
background-color: darkcyan;
float: left;
}
</style>
<body>
<div class="main-container" id="main" style="width:99%">
<div class="top"> <button type="button" id="btn" >確認</button></div>
<div class="left"></div>
<div class="right">
11111111111111111
</div>
</div>
</body>
<script src="./../jquery.min.js"></script>
<script>
function load_home() {
$(".right").html('<object type="text/html" data="new.html" width="100%" height="100%"></object>')
}
$("#btn").click(function(){
load_home()
})
</script>
</html>
效果截圖
初始界面是這樣
我盟看下html結構
可以看到.right元素下文件內容，下面我們來點擊切換按鈕
點擊后，.right元素內元素被替換，改變為一個完整的html文件內容。
大家可以試一試啦。