将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>