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

【问题标题】：Importing html file inside html code on google app script在谷歌应用脚本的html代码中导入html文件
【发布时间】：2021-06-18 20:31:20
【问题描述】：

我制作了一个名为 navBar.html 的 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>

我正在尝试通过导入在几个不同的页面中重用此代码。例如，在我的 index.html 文件中，我不想复制和粘贴导航栏，而是想将其导入正文。我尝试使用 jquery 加载函数、html5 导入，甚至 w3.js，但都无法导入我的 html 代码。我正在使用一个未绑定的脚本，其中包含 code.gs、navBar.html 和 index.html。有关如何在 index.html 中将 navbar.html 与 Google 脚本网页重用的任何建议或想法。

【问题讨论】：

你试过这个方法吗？ w3schools.com/howto/howto_html_include.asp
是的，我做到了，但在获取 navBar.html 时会产生 404 错误
您尝试的其他方法是否也出现同样的错误？
他们都给出了 404 错误。
我相信，但不是 100% 确定这一点，谷歌应用程序脚本不会将文件视为服务器上的文件。似乎它们被视为本地文件。在上面提到的尝试中，html5 import 和 w3.js w3-include-html 过去都对我有用，但这是我第一次在谷歌应用脚本上尝试它。这就是我能想到他们这次没有工作的唯一原因

标签： javascript html google-apps-script

【解决方案1】：

在评估了您的情况后，我提出了一个简单的解决方法。我强烈建议您实施templates。有了它们，您可以轻松地动态 HTML。请遵循指南及其示例。如果您发现任何问题，请随时回信。

【讨论】：