javascript - 在 GAS 嵌入式环境中通过 Javascript 刷新 HTML 文档

Question

因此，我在 Google Appscript 中创建了一个简单的计时应用程序，用于将数据存储在电子表格中，并在内部 Google 网站上的嵌入式 Javascript/JQuery 小程序中显示信息。它看起来像这样:

我的问题是，某些用户将浏览器页面打开的时间太长，必须单击该对象两次才能注销或登录，或刷新页面。我希望设置一个间隔计时器来为他们进行刷新，以节省他们的一步。下面是我在前端的代码，用于处理间隔刷新并在设定的空闲时间后重新创建正文 HTML:

<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.0/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://...moment.js"></script>
<script src="https://...moment-with-locales.js"></script>
<script src="https://...moment-timezone-with-data.js"></script>
<script>
// When the page loads.
function start(){
 try{var dateString = moment(new Date()).format('L');}
 catch(e){var dateString = getNowDateString();}
 document.getElementById("title").style.display = "none";
 document.getElementById("clock").style.display = "none";
 document.getElementById("loader").style.display = "block";
 document.getElementById("interface").style.display = "none";
 google.script.run.withSuccessHandler(showTimeTrack).pullCard(JSON.stringify({email:DATA.email, date:dateString, source:'TimeTrack'}));
}
function showTimeTrack(payload) {
console.log(payload);
var body = $('body').clone();
var time = new Date().getTime();
var data = JSON.parse(payload);
var greenflag = (data.greenflag) ? true: false;
var interface = document.getElementById('interface');
var emailDiv = document.createElement('small');
emailDiv.appendChild(document.createTextNode('Connected as: '));
emailDiv.appendChild(document.createElement('br'));
emailDiv.appendChild(document.createTextNode(DATA.email));
emailDiv.appendChild(document.createElement('br'));
emailDiv.appendChild(document.createElement('br'));
interface.appendChild(emailDiv);

var lastLogDiv = document.createElement('small');
lastLogDiv.innerHTML = '<b>'+data.timecard.info.message+'</b>';
lastLogDiv.appendChild(document.createElement('br'));
if(data.timecard.info.lastRole.length > 0)
{
  lastLogDiv.appendChild(document.createTextNode('As: '+data.timecard.info.lastRole));
}
interface.appendChild(lastLogDiv);

//...Creating various HTML Elements...

interface.appendChild(logBtn); 
interface.appendChild(document.createElement('br')); 
interface.appendChild(document.createElement('br'));

var cardButton = document.createElement('button');
cardButton.innerHTML = 'View Timecard';
console.log(DATA);
cardButton.onclick = function(){openWindowWithPost(JSON.stringify({timecard: data.timecard, directory: DATA.DIRECTORY}));}
interface.appendChild(cardButton);
interface.appendChild(document.createElement('br'));
interface.appendChild(document.createElement('br'));

 setClock();
 document.getElementById("loader").style.display = "none";
 document.getElementById("title").style.display = "block";
 document.getElementById("clock").style.display = "block";
 document.getElementById("interface").style.display = "block";
 
 var refreshIntervalId = setInterval(function(){
    $(document.body).bind("mousemove keypress", function(e) {
       time = new Date().getTime();console.log(time);});
    console.log('Current run is at '+moment(time).format('MMMM Do YYYY, h:mm:ss a'));
   if(new Date().getTime() - time >= 10000) 
      {
        var body = $('body').clone(); document.body.innerHTML = ''; $('body').html(body); start(); var body = $('body').clone(); 
        time = new Date().getTime(); 
        console.log('refreshed at '+moment(new Date()).format('MMMM Do YYYY, h:mm:ss a'));
        clearInterval(refreshIntervalId);
      }
  else {
         console.log('checked at '+moment(new Date()).format('MMMM Do YYYY, h:mm:ss a'));
        }}, 3000);
}
//////////////////////////////////////////////////////FUNCTION SETCLOCK////////////////////////////////////////////////////////////////////////////////////
function setClock()
{
  var now = moment(new Date()).tz(DATA.timeZone).format('hh:mm:ss A z');
  $('#time').html(now);
   setTimeout('setClock()',500);
}
</script>

<!DOCTYPE html>
<html>
<head>
<script>
var DATA = <?!= JSON.stringify(dataFromServerTemplate) ?>;
</script>
<?!= HtmlService.createHtmlOutputFromFile('CSS').getContent(); ?>
</head>
<body onload="start()">

<div id = "loader" class="heart-rate">
  <svg version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 125 73" enable-background="new 0 0 150 73">
    <polyline fill="none" stroke="#CE0000" stroke-width="3" stroke-miterlimit="10" points="0,45.486 38.514,45.486 44.595,33.324 50.676,45.486 57.771,45.486 62.838,55.622 71.959,9 80.067,63.729 84.122,45.486 97.297,45.486 103.379,40.419 110.473,45.486 150,45.486"
    />
  </svg>
  <div class="fade-in"></div>
  <div class="fade-out"></div>
</div>

<p  id = 'title' style="font-size:18px; text-align: center; display: none;"><b>Time<font color="#ff0000">Track</font></b></p>
<div id="clock" style = "display: none;"><small>Current Time:<div id = 'time'></div></small></div><br>
<div id="interface" tex-align: center;></div>  
<div id = 'modal' class = 'modal'>
<div id = 'modalContent' class = 'modal-content'>
</div></div>
<span id = 'closeModal' class = 'close'></span>
<form id="timeCardPost" method="post" action="MustSetURL" target="TheWindow">
<input type="hidden" name="payload" value="set card JSON here" />
</form>
<?!= HtmlService.createHtmlOutputFromFile('JS-TimeTrack').getContent();?>
</body>
</html>

不幸的是，第一次刷新后，间隔似乎会重新加载页面，然后无限地在其下添加正文的另一个副本，如下面的屏幕截图所示:

我尝试过location.reload(带有正确和错误的陈述)。这只会导致白屏。我尝试将 HTML 正文设置为 ()，但这似乎以相同的方式工作。有人知道如何重置页面的正文标记而不仅仅是连接吗？

谢谢， 纳撒尼尔

Answer 1

jquery clone() 方法复制所选元素。您最终得到的结果是 body 标签位于其他 body 标签内，每个标签都嵌套在另一个标签内。

目前

var body = $('body').clone();
document.body.innerHTML = ''; 
$('body').html(body); 
start(); 
var body = $('body').clone();

尝试

var body = document.body.innerHTML;//Get the HTML inside of the `body` tag
document.body.innerHTML = '';//Clear the existing HTML from the `body` tag

console.log('body: ' + body);

document.body.innerHTML = body;

start();