时间戳

首页 > 解决方案 > 在谷歌应用脚​​本的html代码中导入html文件

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

问题描述

我制作了一个名为 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 脚本网页重用的任何建议或想法。

标签： javascripthtmlgoogle-apps-script

解决方案

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

推荐阅读