在谷歌应用脚本上的 html 代码中导入 html 文件

Question

I have made an html file called navBar.html

    <nav id="navbar">
    <ul>
      <li class="dropdown" style= "background-color: #191970" >
        <?var url = getScriptUrl();?><a href='<?=url?>?page=Page' target="_top" id="Home" class="dropbtn">Home</a>
        <div class ="dropdown-content">
        </div>
      </li>
      <li class="dropdown"style= "background-color: #191970">
          <a href="https://script.google.com/macros/s/AKfycbyyYKI6fGf_LnRA8jPDa1QTJwUGqrG34lTDmHyugMHFZ4LYcWF4OBxjxa6BPtRyw-gj/exec" target="_top" id="Game" class="dropbtn">Games</a>
          <div class ="dropdown-content">
          </div>
      </li>
      <li class="dropdown" style= "background-color: #191970" >
        <a href="#"  class="dropbtn">Cipher</a>
        <div class ="dropdown-content">
          <?var url = getScriptUrl();?><a href='<?=url?>?page=Caesar_Cipher' target="_top" id="Caesar_Cipher" name="Caesar_Cipher"> Caesar_Cipher </a>
          <?var url = getScriptUrl();?><a href='<?=url?>?page=Simple_Substitution_Cipher' target="_top" id="Simple_Substitution_Cipher" name="Simple_Substitution_Cipher"> Simple_Substitution_Cipher </a>
          <?var url = getScriptUrl();?><a href='<?=url?>?page=Playfair_Cipher' target="_top" id="Playfair_Cipher" name="Playfair_Cipher"> Playfair_Cipher </a>
          <?var url = getScriptUrl();?><a href='<?=url?>?page=Vigenere_Cipher' target="_top" id="Vigenere_Cipher" name="Vigenere_Cipher"> Vigenere_Cipher </a>
          <?var url = getScriptUrl();?><a href='<?=url?>?page=One_Time_Pad' target="_top" id="One_Time_Pad" name="One_Time_Pad"> One_Time_Pad </a>
          <?var url = getScriptUrl();?><a href='<?=url?>?page=Transposition_Cipher' target="_top" id="Transposition_Cipher" name="Transposition_Cipher"> Transposition Cipher </a>
          <?var url = getScriptUrl();?><a href='<?=url?>?page=Feistel_Block_Cipher' target="_top" id="Feistel_Block_Cipher" name="Feistel_Block_Cipher"> Feistel_Block_Cipher </a>
        </div>
      </li>
    <li class="dropdown" style= "background-color: #191970" >
        <a href="#"  class="dropbtn">Encryptions</a>
        <div class ="dropdown-content">
          <?var url = getScriptUrl();?><a href='<?=url?>?page=DES' target="_top" id="DES" name="DES"> DES </a>
          <?var url = getScriptUrl();?><a href='<?=url?>?page=AES' target="_top" id="AES" name="AES"> AES </a>
          <?var url = getScriptUrl();?><a href='<?=url?>?page=RSA' target="_top" id="RSA" name="RSA"> RSA </a>
          <?var url = getScriptUrl();?><a href='<?=url?>?page=ElGamal_Cryptosystem' target="_top" id="ElGamal_Cryptosystem" name="ElGamal_Cryptosystem"> ElGamal_Cryptosystem </a>
          <?var url = getScriptUrl();?><a href='<?=url?>?page=Triple_DES' target="_top" id="Triple_DES" name="Triple_DES"> Triple_DES </a>
        </div>
      </li>
    </ul>
  </nav>

I am trying to reuse this code in several different pages by importing it. For example, in my index.html file, instead of copying and pasting the navbar, I want to import it into the body. I tried using jquery load function, html5 import, and even w3.js and all were not able to import my html code. I am using an unbound script, with code.gs, navBar.html and index.html. Any recommendations or ideas on how to proceed with reusing navbar.html inside index.html with google script web pages.

Answer 1

After evaluating your situation I came with a simple fix. I strongly recommend you to implement templates . With them you can dynamic HTMLs with the minimal effort. Please follow the guide and its examples. Feel free to write back if you find any issue with it.