如何在没有服务器的情况下将共享的html加载到页面中

How toload shared html into page without server?

本文关键字：加载 html 共享 情况下 服务器      更新时间：2023-09-26

我试图在多个页面上共享一个导航栏。

通常情况下，您可以使用jQuery的.load()函数或其他需要web服务器的方法来完成此操作，但如下面的示例所示，在没有web服务器的情况下也可以这样做。然而，由于某种原因，使用这种方法会将shared.html的内容包裹在一个主体中，从而改变布局。有没有其他方法可以在没有服务器的情况下加载html页面。

<div id="navbar">
</div>
<script>
    function load(){
        document.getElementById("navbar").innerHTML='<object type="text/html" data="shared.html" ></object>';
    }
    load();
</script>
//contents of shared.html
<nav class="navbar navbar-default navbar-fixed-top">
   <div class="container">
      ...
   </div>
</nav>

您可以尝试创建一个只有shared.html中所需代码的表单，然后使用php将其包含在内。

<nav class="navbar navbar-default navbar-fixed-top">
   <div class="container">
      <?php include("shared.html") ?>
   </div>
</nav>
相关文章：