0

In my Google Application Script web I am loading dynamically Google Doc as HTML. If I insert second HTML exactly the same way then it crashes the layout.

You can test it here

Test scenario 1

  • Load page
  • wait till see the text (file 1 is loaded)
  • go to the other tab and load file2
  • go back to the first tab and the layout is different (the error is not consistent in terms when and how it performs)

Test scenario 2

  • Load page
  • wait till see the text (file 1 is loaded)
  • load file 3
  • check the bottom of the page. New test appears and everything is ok

Test scenario 3

  • Load page
  • wait till see the text (file 1 is loaded)
  • load file 3
  • check the bottom of the page. New test appears and everything is ok
  • go to the other tab and load file2
  • go back to the first tab and the layout is different (the error is not consistent in terms when and how it performs)

Server side code looks like. NOTE that from file3 are removed <head> tags.

Could someone explain and hopefully suggest a solution to this issue?

function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}


  function getGoogleDocumentAsHTML(file){
console.log(file)
if (file == 1){
     var docID ="1vRMY6bIkUc_J6qDOUJszIYAtIWH-aHTdYYgCmlL4"
}
if (file == 2 || file == 3){
     var docID ="1VBpazC3SO2hx4PA7r3A2jud5O9-teNu0nvvnIDac"
}

    var forDriveScope = DriveApp.getStorageUsed(); //needed to get Drive Scope requested



    var url = "https://docs.google.com/feeds/download/documents/export/Export?id="+docID+"&exportFormat=html&format=html";
    var param = {
      method      : "get",
      headers     : {"Authorization": "Bearer " + ScriptApp.getOAuthToken()},
      muteHttpExceptions:true,
    };
    var html = UrlFetchApp.fetch(url,param).getContentText()

   // return cleanHTML(html)

if (file == 3 ){
    return cleanHTML(html)
}


    return html
    //return HtmlService.createHtmlOutput(html).getContent()
  }


function cleanHTML(html){

    // nuke the whole head section, including the stylesheet and meta tag
    html = html.replace(/<head>.*<\/head>/, '');
    // remove almost all html attributes
//    html = html.replace(/ (id|style|start|colspan|rowspan)="[^"]*"/g, '');
//    html = html.replace(/ (id|class|style|start|colspan|rowspan)="[^"]*"/g, '');
    // remove all of the spans, as well as the outer html and body
//    html = html.replace(/<(span|\/span|body|\/body|html|\/html)>/g, '');
    // clearly the superior way of denoting line breaks
//    html = html.replace(/<br>/g, '<br />');

return html

}

and html part is here

<!DOCTYPE html>
<html>
  <head>
    <base target="_self">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" media="screen,projection" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.9.3/css/tabulator.min.css" rel="stylesheet">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.9.3/js/tabulator.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.9.3/css/materialize/tabulator_materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>  


  </head>
  <body>
    <div class="row">
      <div class="col s12">
        <ul class="tabs" id="tabsTest">
          <li class="tab col s3"><a href="#test2">HTML from file - loaded</a></li>
          <li class="tab col s3"><a href="#test1">Second to be loaded</a></li>
        </ul>
      </div>
      <div id="test1" class="col s12">
        <button id ="testingAdmin" class="waves-effect btn" onClick="getHTML(2)">Load second HTML</button>
        <div id="test" class="container col s12"> </div>
      </div>
      <div id="test2" class="col s12">
                <button id ="testingAdmin" class="waves-effect btn" onClick="getHTML(3)">Load third HTML</button>
        <div id="testovani" class="container col s12"></div>
        <div id="test3" class="container col s12"> </div>
    </div>
    <script>
      function getHTML(file){
        google.script.run.withSuccessHandler(
          function(output){
            if (file == 1){
                document.getElementById("testovani").innerHTML = output
            }
            if (file == 2){
                document.getElementById("test").innerHTML = output
            }
            if (file == 3){
                document.getElementById("test3").innerHTML = output
            }
          }
        ).getGoogleDocumentAsHTML(file);
      }

      document.addEventListener("DOMContentLoaded", function(event) {
        
        var options ={}
        var tabs = document.querySelectorAll('.tabs')

        var tabsOptions = {
          onShow : function(e) {
    console.log(e.id)
            switch (e.id){
              case "test2": 
              console.log("testing")
                break;
              default: 
            }
          } 
        }
      var instance = M.Tabs.init(tabs, options);
      getHTML(1)

        });
    </script>

  </body>
</html>
Radek
  • 13,813
  • 52
  • 161
  • 255

0 Answers0