將HTML頁面加載到畫布容器內的div中

Question

編輯：這是控制台錯誤-jquery.min.js：2無法加載文件：///root/Documents/VS%20Code/Javascript/MockDashboard/hr.html：跨源請求僅支持協議方案：http ，數據，chrome，chrome擴展名，https。

我正在使用CSS庫（如Slidebar js和bootstrap）創建儀表板。 似乎一切正確，除了我無法從畫布的側邊欄鏈接加載到畫布div的html頁面。 請幫助我的代碼：

 $("#hr").click(function(e) { e.preventDefault(); $("#body").load('./hr.html'); }); 

 <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/slidebars.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="scripts/slidebars.min.js"></script> <div canvas="container"> <!-- Top Navbar --> <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top"> </nav> <!-- Body --> <div class="container" id="body"> </div> <!-- Bottom Navbar --> <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom"> </nav> </div> <!-- Slidebar --> <div off-canvas="id-1 left overlay"> <div class="container-fluid sidebar"> <div class="jumbotron sidebar-profile"> <a href="profile.html" class="dp-click"> <img src="css/default-dp.png" class="img-circle dp" alt="dp"> </a> <h4 class="username">Anon</h4> </div> <a href="hr.html" id="hr">HR</a> </div> </div> 

Answer 1

我發現了：如果網頁是使用file：協議加載的，Chrome不允許您使用file：協議發出AJAX請求。 因此，相同的代碼在Firefox上也可以完美地工作。 如果有人想出一種在chrome上運行的方法，請更新答案。