Question

好吧，我有一个简单的网络应用程序构建在谷歌应用程序脚本，我不使用HTML文件，只是code.gs. 这是一个部分：

function doGet(e) {
...............
  html += "<center><h3 style='font : bold 1.5rem Helvetica, Arial, sans-serif;margin : 0 0 1em;'><a style='text-decoration : none;color : #a28351;position : relative;transition : all 0.25s linear;' href="+eventLink+" target='_blank'>" +eventTitle+"</a></h3>"+"<p style='font-size : 14px;margin : 0 0 1.5em;'>►Cuando?: "+start+"<br>►Donde?: "+location+"</br><br>"+description+"</br></p>"+
"<br/><a style='text-decoration : none;color : #a28351;position : relative;transition : all 0.25s linear;' href="+eventLink+" target='_blank'><img style='display : block;margin: 0 auto;//margin : 0 10px 10px 0;//max-width : 100%;//vertical-align: middle;//text-align: center;' src='"+eventPic+"' ></a><br/></center>";
   }
   }
  return HtmlService.createHtmlOutput(html);
}

这是最终结果：https://script.google.com/macros/s/AKfycbzEBQfsg6v6176fWJOpZxAxEWVW2rCQ9lGPL1RC9KZShaCeipHN/exec

但显示内容需要将近7秒钟，这可能会使用户感到困惑并关闭窗口;所以我想在代码收费时显示一个gif。

Answer 1

您需要使用doGet()加载一些最小的HTML，然后该代码需要具有window.onload函数：

window.onload=function() {
  console.log("window.onload ran");
};

因此，首先将一些代码提供给客户端，然后window.onload函数在加载第一个HTML时自动运行。然后该代码在微调器仍在旋转时检索大量HTML。

在window.onload函数内部，通过将一些HTML注入DIV元素，使微调器开始工作：

<div> this is a test</div>
<div id='divSpinner'></div>

<script type="text/javascript">
window.onload=function() {
  console.log("This onload did run");
  document.getElementById('divSpinner').style.display = 'inline';
  document.getElementById('divSpinner').innerHTML = '<div><img src="https://c4a54d10381f750e81dcc323aed21e2c95725815.googledrive.com/host/0Bwyqwd2fAHMMallsNkNOV0RfcTg/wait_progress.gif"></div>';
  };
</script>

window.onload函数运行google.script.run API并获取剩余的HTML内容，将其注入页面，然后最终关闭微调器。

这是完整的代码：

用于启动的HTML：

<div id='idMainContent'> this is a test</div>
<div id='divSpinner'></div>

<script type="text/javascript">
window.onload=function() {
  console.log("This onload did run");
  document.getElementById('divSpinner').style.display = 'inline';
  document.getElementById('divSpinner').innerHTML = '<div><img src="https://c4a54d10381f750e81dcc323aed21e2c95725815.googledrive.com/host/0Bwyqwd2fAHMMallsNkNOV0RfcTg/wait_progress.gif"></div>';

  google.script.run.withFailureHandler(onFailure)
    .withSuccessHandler(injectMyContent)
      .getMainContent();

  };

window.injectMyContent = function(argHTML) {
  document.getElementById('idMainContent').innerHTML = argHTML;

  //Clear spinner DIV
  document.getElementById('divSpinner').innerHTML = "";
  //Hide spinner
  document.getElementById('divSpinner').style.display = 'none';

};
</script>

Code.gs

function doGet() {

  return HtmlService.createHtmlOutputFromFile('test HTML')
    .setTitle('The Name of Your Page')
    .setSandboxMode(HtmlService.SandboxMode.NATIVE);
};

function getMainContent() {
  return "<div>This is new HTML!</div>";
};

如果你想在不从文件中获取HTML的情况下这样做，你当然可以这样做，我的例子显示从文件中获取初始HTML。我对此进行了测试，但它确实有效。它首先显示一个微调器和一些最小的消息，然后从服务器检索更多的内容，并注入到站点中。

如何在加载Google网络应用时显示gif

1 个答案:

用于启动的HTML：

Code.gs