时间戳

首页 > 解决方案 > 我可以将我所有的 html 文件放在一个 javascript const 中并用“HtmlService.createHtmlOutput().setContent(CONST_HTML)”显示它吗？

javascript - 我可以将我所有的 html 文件放在一个 javascript const 中并用“HtmlService.createHtmlOutput().setContent(CONST_HTML)”显示它吗？

问题描述

我有这个 html 文件：

 <!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <!--script version: 1.1 (21/12/2020)-->
    <style type="text/css">
      *{font-family: "Roboto"}.loading{position:fixed;z-index:999;height:2em;width:2em;overflow:visible;margin:auto;top:0;left:0;bottom:0;right:0}.loading:before{content:"";display:block;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.3)}.loading:not(:required){font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.loading:not(:required):after{content:"";display:block;font-size:10px;width:1em;height:1em;margin-top:-.5em;-webkit-animation:spinner 1.5s infinite linear;-moz-animation:spinner 1.5s infinite linear;-ms-animation:spinner 1.5s infinite linear;-o-animation:spinner 1.5s infinite linear;animation:spinner 1.5s infinite linear;border-radius:.5em;-webkit-box-shadow:rgba(0,0,0,.75) 1.5em 0 0 0,rgba(0,0,0,.75) 1.1em 1.1em 0 0,rgba(0,0,0,.75) 0 1.5em 0 0,rgba(0,0,0,.75) -1.1em 1.1em 0 0,rgba(0,0,0,.5) -1.5em 0 0 0,rgba(0,0,0,.5) -1.1em -1.1em 0 0,rgba(0,0,0,.75) 0 -1.5em 0 0,rgba(0,0,0,.75) 1.1em -1.1em 0 0;box-shadow:rgba(0,0,0,.75) 1.5em 0 0 0,rgba(0,0,0,.75) 1.1em 1.1em 0 0,rgba(0,0,0,.75) 0 1.5em 0 0,rgba(0,0,0,.75) -1.1em 1.1em 0 0,rgba(0,0,0,.75) -1.5em 0 0 0,rgba(0,0,0,.75) -1.1em -1.1em 0 0,rgba(0,0,0,.75) 0 -1.5em 0 0,rgba(0,0,0,.75) 1.1em -1.1em 0 0}@-webkit-keyframes spinner{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@-moz-keyframes spinner{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@-o-keyframes spinner{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spinner{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}.inputButton{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;cursor:pointer;margin:10px;padding:10px 20px;border:3px solid #018dc4;-webkit-border-radius:5px;border-radius:5px;font:normal 16px/normal Tahoma,Geneva,sans-serif;color:rgba(255,255,255,.9);-o-text-overflow:clip;text-overflow:clip;background:#0199d9;-webkit-box-shadow:2px 2px 2px 0 rgba(0,0,0,.2);box-shadow:2px 2px 2px 0 rgba(0,0,0,.2);text-shadow:-1px -1px 0 rgba(15,73,168,.66);-webkit-transition:all .3s cubic-bezier(.42,0,.58,1);-moz-transition:all .3s cubic-bezier(.42,0,.58,1);-o-transition:all .3s cubic-bezier(.42,0,.58,1);transition:all .3s cubic-bezier(.42,0,.58,1)}table{border-collapse:collapse;border-style:solid;border-color:#7ea8f8;background-color:#fafbff;margin:auto}td{height:18px}td.A{width:45%}td.B{width:50%}
    </style>
  </head>
  <body>
    <table border="1" cellspacing="0" cellpadding="5">
<tbody>
<tr>
<td class="A"><strong>CLIENTE:</strong></td>
<td class="B"><span id="clientName"></span></td>
</tr>
<tr>
<td class="A"><strong>CUIT:</strong></td>
<td class="B"><span id="clientCuit"></span></td>
</tr>
<tr>
<td class="A"><strong>ESTABLECIMIENTO:</strong></td>
<td class="B"><span id="clientOffice"></span></td>
</tr>
<tr>
<td class="A"><strong>EMAIL&nbsp;CLIENTE:</strong></td>
<td class="B"><span id="clientEmail"></span></td>
</tr>
<tr>
<td class="A"><strong>TEMA&nbsp;DE&nbsp;CAPACITACI&Oacute;N:</strong></td>
<td class="B"><span id="CDOTopic"></span></td>
</tr>
<tr>
<td class="A"><strong>FECHA&nbsp;DE&nbsp;INICIO:</strong></td>
<td class="B"><span id="CDOInitDate"></span></td>
</tr>
<tr>
<td class="A"><strong>FECHA PROGRAMADA DE FINALIZACI&Oacute;N:</strong></td>
<td class="B"><span id="CDOEndDate"></span></td>
</tr>
<tr>
<td class="A"><strong>TOTAL&nbsp;DE&nbsp;RESPUESTAS:</strong></td>
<td class="B"><span id="CDOTotalResponses"></span></td>
</tr>
<tr>
<td class="A"><strong>USUARIO&nbsp;INICIADOR:</strong></td>
<td class="B"><span id="CDOCreatorEmail"></span></td>
</tr>
</tbody>
</table>

<input class="inputButton" type="button" onclick="closeWindow()" value="Cerrar" />
<div style="display:none" id="loading" class="loading">Loading&#8230;</div>
    <script>
      window.onload = function(){startLoadingAnimation();google.script.run.withSuccessHandler(fillFields).getCDOConfig()}

function fillFields(values){

var objConf = JSON.parse(values);

var initDateField = document.getElementById("CDOInitDate");
var endDateField = document.getElementById("CDOEndDate");
var clientNameField = document.getElementById("clientName");
var clientCuitField = document.getElementById("clientCuit");
var clientOfficeField = document.getElementById("clientOffice");
var clientEmailField = document.getElementById("clientEmail");
var CDOTopicField = document.getElementById("CDOTopic");
var CDOCreatorField = document.getElementById("CDOCreatorEmail");
var CDOTotalResponsesField = document.getElementById("CDOTotalResponses");

initDateField.textContent = objConf.initDateString;
endDateField.textContent = objConf.endDateString;
clientNameField.textContent = objConf.clientName;
clientCuitField.textContent = objConf.clientCuit;
clientOfficeField.textContent = objConf.clientOffice;
clientEmailField.textContent = objConf.clientEmail;
CDOTopicField.textContent = objConf.topic;
CDOCreatorField.textContent = objConf.creator;
CDOTotalResponsesField.textContent = objConf.totalResponses;

stopLoadingAnimation();
}
function closeWindow() {google.script.host.close()}
function startLoadingAnimation(){document.getElementById("loading").style.display = "block"}
function stopLoadingAnimation(){document.getElementById("loading").style.display = "none"}
    </script>
  </body>
</html>

尽管有更好的做法，但我尝试将所有内容放入一个常量中，然后使用“HtmlService.createHtmlOutput().setContent(CODE)”显示它。我实际遇到的问题是，在缩小代码并显示它之后，代码中的所有 javascript 都无法正常工作。

有什么步骤我忘记了吗？我尝试不同的东西，比如以下几行：

HtmlService.createHtmlOutput().setContent(HtmlService.createTemplate(CODE).evaluate().getContent())

标签： javascriptgoogle-apps-script

解决方案

行。我找到了解决方案。在 Google App Script 中，您不能真正信任诸如window.onloador之类的方法$.ready(function(){//code});。

我只是将 window.onload() 方法移到脚本标签的末尾，一切正常。

他的所有脚本都运行在一个<iframe></iframe>标签中。因此，您没有像文档或 DOM 完全加载时那样的事件。

我只是将方法放在最后，并相信，当代码运行时，所有内容都会在该点加载。

推荐阅读