更改内部 html 时初始化失败（谷歌应用脚本）答案

【问题标题】：Fail to initialize when changing inner html (google app script)更改内部 html 时初始化失败（谷歌应用脚本）
【发布时间】：2021-06-23 15:50:11
【问题描述】：

（原始问题）

我现在正在尝试使用 Materialize 布局和组件通过 App Script 开发一个 Web 应用程序。

由于我想创建一个包含不同页面按钮的导航栏（这应该会更改网站的正文部分），我发现每个网站中的元素都无法正常工作。我尝试使用doGet(e) 和一些if-else 参数创建站点路线，这些参数工作得很好，但这会呈现一个全新的页面，而不是保持导航栏在上方。我想知道是否有办法这样做...（我猜这是我更改 innerHTML 的方式错误。）

目前，主页显示正常。但是，当我单击导航栏上的“A”按钮（并在下方显示一个日期选择器）时，它现在会弹出一个应有的选择器。

（0327更新）

对于我的问题有任何误导性，我深表歉意。我尝试使用仅包含我的情况的更新代码来简化下面的问题。

下面的页面是一个包含“datePicker1”元素的mainPage，当我点击上面的“Page A”按钮时，一个新的“datePicker2”被写入到DOM内容中。但是，“dP1”运行良好，它按预期弹出日历，但“dP2”不是。 :(

（附注：我认为我不够清楚：对于前面提到的“导航栏”，我希望它可以作为 HTML 中的标题。）

这是我的代码（更新）：

(mainPage.html)

<!DOCTYPE html>
<html language="en">
  <head>
    <base target="_top">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" >
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  </head>
    
  <body>
    <!-- navbar -->
    <header>
      <div class="navbar-fixed">
        <nav>
          <div class="nav-wrapper teal darken-4">
            <div class="row">
              <div class="col s10 offset-s1">
                <div class="brand-logo">Logo</div>
                <ul id="nav-mobile" class="right hide-on-med-and-down">
                  <li><a onClick="pageSelect(0);">Page A</a></li>
                  <li><a onClick="pageSelect(1);">Page B</a></li>
                  <li><a onClick="pageSelect(2);">Page C</a></li>
                </ul>
              </div>
            </div>
          </div>
        </nav>
      </div>
    </header>
    
    <section>
      <div class="container">
        Dateinput 1:
        <div class="input-field">
          <label for="dateinput1">Dateinput 1</label>
          <input id="dateinput1" type="text" class="datepicker">
        </div><br>
        Dateinput2:
        <div id="pageContent">
        </div>
      </div>
    </section>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script> 
    <script>
      $(document).ready(function(){
        $('.datepicker').datepicker();
      });
    </script>
    <script>
      function changeContent(content){
        document.getElementById("pageContent").innerHTML = content;
      }
      function pageSelect(index){
        google.script.run.withSuccessHandler(changeContent).getPage(index);
      }
    </script>
  </body>
</html>

(pageA.html)

<div class="input-field">
  <label for="dateinput2">Dateinput 2</label>
  <input id="dateinput2" type="text" class="datepicker">
</div>

(backend.gs)

var mainPage = HtmlService.createTemplateFromFile("mainPage");

function doGet() {
  return mainPage.evaluate()
  .setTitle("mainPage")
  .setSandboxMode(HtmlService.SandboxMode.IFRAME)
  .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

function getPage(index){
  let pageName;
  switch(index){
    case 0: pageName = "pageA"; break;
    case 1: pageName = "pageB"; break;
    case 2: pageName = "pageC"; break;
  }
  return HtmlService.createHtmlOutputFromFile(pageName).getContent();
}

我试图自己解决这个问题并一直在寻找，但仍然没有进一步...... 希望我能说清楚，非常感谢！

【问题讨论】：

通常导航栏是每个页面的一部分
stackoverflow.com/a/55770563/7215091
@YvesC - 你能附上that renders a whole new page instead of keeping the nav-bar above still. 的截图吗？我试图复制你的代码，导航栏工作得很好。
@Cooper，感谢您的参考。我想我以前不是那么清楚。正如更新后的代码所示，我想使用<nav> 作为保持在页面顶部的标题。
@NikkoJ。感谢您的检查，我更新了上面的问题和代码，请检查出来。谢谢很多:)

标签： javascript html google-apps-script

【解决方案1】：

如果您将 Web 应用程序的元素检查到浏览器，您可以在 dateinput1 中看到附加的模式和注入的日期选择器 (dateinput2) 没有。在构建过程中，如果materialize.js在你的html中找到了datepicker类，它会在点击文本框时追加datepicker-modal类，显示日期选择器。

但是由于您的脚本在构建过程之后注入了dateinput2，因此它不会获得 datepicker-modal。这会导致您的脚本不显示日期选择器。

替代解决方案是在主 html 文件中包含 dateinput2 并使用样式属性 display 隐藏和显示日期选择器框。这样，我们可以确保 dateinput2 具有显示日期选择器的模式。

参考：

Style display Property

【讨论】：