Using HTMLService with Google Apps Script

U
Published in: Google Apps Script

The Text Browser uses the URLFetchApp service of Google Apps Script to fetch web pages and the HtmlService to render this content on the user’s screen.

Here’s the full source that powers the Text Browser sans the CSS styling.

Code.js

// Code.js
function doGet() {
  var html = HtmlService.createTemplateFromFile("textbrowser").evaluate();
  html.setTitle("Text Browser - Digital Inspiration")
  return html;
}

function getHTML(url) {
  try {
    var response = UrlFetchApp.fetch(url);
  } catch (e) {
    return "Sorry but Google couldn't fetch the requested web page. "
      + "Please try another URL!<br />"
      + "<small>" + e.toString() + "</small>";
  }
  return response.getContentText();
}

TextBrowser.html

// TextBrowser.html
<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js">
    </script>
  </head>

  <body>
    <div id="wrap">
      <div class="container">
        <div class="page-header">

          <h2 class="title">The Text Browser</h2>

          <small>Enter a URL below and hit the Go! button.</small>
          <div class="input-append">
            <input id="URL" type="text">
            <button type="button" onclick='loadURL();' id="go">Go!</button>
          </div>

        </div>
        <div class="loading"></div>
        <div class="webpage"></div>

      </div>
    </div>

    <script>

      $("#URL").keyup(function(e){
        if(e.keyCode == 13){
          loadURL();
        }
      });

      function onSuccess(html) {

        $('div.webpage').html(html);

        $('div.webpage').show();
        $('div.loading').hide();

        $('div.webpage a').bind("click", function() {
          var value = $(this).attr('href');
          $('#URL').val(value);
          loadURL();
          return false;
        });

        $("div.webpage img").remove();
        $("div.webpage iframe").remove();
        $("div.webpage form").remove();
      }

      function loadURL() {
        var url = $("#URL").val();
        $('div.webpage').hide("fast");
        if (url.length>=4) {
          $('div.loading').show();
          google.script.run.withSuccessHandler(onSuccess).getHTML(url);
        }
      }

    </script>

  </body>
</html>
Published in: Google Apps Script

Looking for something? Find here!

Meet the Author

Web Geek, Tech Columnist
A
Amit Agarwal

Amit Agarwal is a Google Developer Expert in GSuite and Google Apps Script. He holds an engineering degree in Computer Science (I.I.T.) and is the first professional blogger in India. Read more on Lifehacker and YourStory

Get in touch