Webpage Widget doesn't display the page's javascript

  • 1
  • Problem
  • Updated 2 years ago
  • Solved
So I created a Google Sites page to be a welcome note on our lobby display. The welcome page runs an appScript that will check a Google spreadsheet, grab a list of names, and then display them in either a list, cycle through them one at a time, or just display a single name. After much work getting this functioning (and getting the page to actually display through the RiseVision Player), the page will display, but the javascript-run names will not. I'm wondering if anybody knows what may be up with this. When you pull the page up in a browser everything works just fine.

Link to the webpage: https://sites.google.com/a/alumni.olemiss.edu/alumnidisplay/alumniwelcome
I can't seem to find how to link to the presentation though so I'll link that as soon as I figure it out!
Photo of Jordan Dillon-Maginnis

Jordan Dillon-Maginnis

  • 130 Points 100 badge 2x thumb
  • A little frustrated.

Posted 2 years ago

  • 1
Photo of Robb

Robb, Official Rep

  • 76,676 Points 50k badge 2x thumb
Jordan,

I think this is a case of the site not being able to be shown in an iFrame. When I look at the Developer tools while running a preview, I see this in the Dev Console:


I think that is the reason that you cannot show that text in your Presentation.
I thought something similar when I saw that too, however I wasn't completely sure at first because it is able to load and display the rest of the webpage (i.e. the welcome header). Must be just the JS that the x-frame takes issue with. Not sure where to go from here though, my web-dev skills are a bit rusty! 
Photo of HSuarez

HSuarez

  • 11,896 Points 10k badge 2x thumb
Hi Jordan

Looking at the Dev Console image, it looks like the source of the issue is from a sites.google.com domain. Is there an option similar to this 2014 article where you can select to allow the Google Sites to be embedded in other sites? If so, see if you can enable the 'Allow embedding of your sites in other sites' option...
(Edited)
Hey Hannah, I had to do that to get the page to display at all so it's still set to allow embedding. Should have included that in the OP.
Photo of HSuarez

HSuarez

  • 11,896 Points 10k badge 2x thumb
Hi Jordan,
Is this a presentation embedded within a presentation? For example in the main Alumni presentation, are you embedding the presentation that contains the word 'Jordan'? I am not too sure why this is not showing on Google Sites. Otherwise, are you able to export Google Sites into a separate HTML page and then upload the assets to another media server or even to Rise Storage?
Exactly correct, Google sites let's you embed appScripts, which I believe creates an iframe. After seeing the xframe sameorigin error I found an iframe attribute called allow-same-origin, but I can't figure out where the iframe is created exactly to place the attribute. I can upload that code when I get back to the office tomorrow.
Here's my appScript that I have embeded into the Google Sites page:

~~~jsnamedisplay.gs~~~

var DOC_ID = "1E969qh8NenAXICpnuuYSIICM9CzUh888FnFULR-gfls";
function doGet(){
   return HtmlService.createHtmlOutputFromFile('nameBox.html')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}  

function createNameArray(){
  var sheet = SpreadsheetApp.openById(DOC_ID).getSheetByName("WelcomeNames");
  var names = sheet.getDataRange().getValues();
  var nameArray = new Array;
  for(var i=0;i<names.length;i++){
    nameArray[i] = names[i][0];
  }
  return nameArray;
}


The above code all runs server-side because that's the only way to access google docs/sheets/slides/etc. It returns a simple array of names to the HTML page that is what's actually displayed 


~~~nameBox.html~~~

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script>
       function onSuccess(nameArray) {
          var i = 0;
    //display style: 0=cycle; 1=all names; 2=one name only
          var displayStyle = 2;
    // cycle through list of names one at a time
          if (displayStyle == 0){
            var timer = setInterval(cycleNames, 120000);
            function cycleNames(){
              if (i <= nameArray.length){
                var div = document.getElementById("textDiv");
                div.textContent = nameArray[i];
                var text = div.textContent;
                i++;
              }
              if (i > nameArray.length){i = 0;}
            }
          }
    // Display all names at once in columns 
          else if (displayStyle == 1){
            function tableCreate() {
              var body = document.body,
                       tbl  = document.createElement('table');
              tbl.style.width = '100%';
              var numNames = nameArray.length;
              var col, row, count;
              if (numNames <= 5){col = 1;}
              else if ((numNames > 5) && (numNames < 11)){col = 2;} 
              else if (numNames > 11){col = 3;}
              row = Math.ceil(numNames/col);
              count = 0;
              for(var x=0;x<row;x++){
                  var tr = tbl.insertRow();
                  for(var y=0;y<col;y++){
                      if ((count <= numNames) && (nameArray[count]!=null)){
                        var td = tr.insertCell();
                        td.appendChild(document.createTextNode(nameArray[count]));
                        count++;
                      } else {td.appendChild(document.createTextNode(" "));}
                  }
              }
              body.appendChild(tbl);
            }  
            tableCreate();
          }              
    // Display one name perminantly
          else if (displayStyle == 2){
            var div = document.getElementById("textDiv");
            div.textContent = "Jordan";
            var text = div.textContent;
          }
       }
       google.script.run.withSuccessHandler(onSuccess).createNameArray(); 
    </script>
    <style>
    #textDiv {
       text-align: center;
       color: red;
       font-family: verdana, arial;
       font-size: 48px;
       font-weight: bold;
    }
    table, td, tr {
       padding: 20px;
       color: red;
       text-align: center;
       font-family: verdana, arial;
       font-size: 30px;
       font-weight: bold;
    }
  </style>
  </head>
  <body>
    <div id="textDiv"></div>
  </body>
</html>


The HTML portion works just fine, I'm just not sure where I can attach/assign the iframe attributes/flags.
Photo of HSuarez

HSuarez

  • 11,896 Points 10k badge 2x thumb
Is the name HTML in a separate page? Also are you embedding the names using the <iframe> tag? If so see http://www.w3schools.com/tags/att_ifr... on how to add allow-same-origin within the iframe tag.

Otherwise there is some documentation at https://developers.google.com/apps-sc... but I don't know how it works with Google App Scripts. It may be a query on Google's product/support forums also.
I think that's what I'll do. I believe the iframe is created by the .setSandboxMode(HtmlService.SandboxMode.IFRAME) function. I'll post back here with what they say in case anybody else has a similar problem in the future.