Screenly Forum

Intermittent white screen with published Google Sheet

As the title suggests, I randomly but regularly (~50% maybe) get blank white screens when loading an asset that has a published Google Sheet. I created 2 assets that load every 3 minutes in case the server that is hosting the html gets rebooted. The html I’m using to make these sheets full screen is:

<!DOCTYPE html>
<html><head>
<style>
html, body {background: black;margin: 0; padding: 0; width: 100%; height: 100%;}
iframe {width: 100%; height: 100%; border: none; transform: scale(1.63,1.34); -webkit-transform: scale(1.63,1.34); -moz-transform: scale(1.63,1.34); transform-origin: 0 0; -webkit-transform-origin: 0 0; -moz-transform-origin 0 0}
</style>
</head>
<body>
<iframe id="sheet1" src="(published doc URL)?gid=0&chrome=false&id=1" frameborder="0" width="100%" height="100%" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"</iframe>
</body>
</html>

The 2 assets have differing frame IDs and &id= numbers for the Google URL in an attempt to avoid caching, which I thought may be the issue but hasn’t helped.

Using Screenly OSE master@959e5d3 on a Pi 4B running Raspbian Buster. I haven’t seen anything unusual in the screenly logs or systemd.

Thanks!

For anyone who might be searching on this, it appears to be a Google issue. The files they generate have a nonce which occasionally doesn’t match other resources and thus the page fails. The solution which seems to be working was to add a random number to the URL:

<!DOCTYPE html>
<html><head>
<style>
html, body {background: black;margin: 0; padding: 0; width: 100%; height: 100%;}
iframe {width: 100%; height: 100%; border: none; transform: scale(1.63,1.34); -webkit-transform: scale(1.63,1.34); -moz-transform: scale(1.63,1.34); transform-origin: 0 0; -webkit-transform-origin: 0 0; -moz-transform-origin 0 0}
</style>
</head>
<script>
  function functionMy() {
    document.getElementById("sheet1").setAttribute("src","(published doc URL)?gid=0&chrome=false&id=" + Math.random())
  }
</script>
<body onload="functionMy();">
<iframe id="sheet1" src="" frameborder="0" width="100%" height="100%" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"</iframe>
</body>
</html>

Another fun fact - If your doc is public you can use “https://docs.google.com/spreadsheets/d/(key)/htmlembed/sheet?gid=0&id=” instead of publishing it.