Google spreadsheet without header and footer

Question

I want to embed a Google spreadsheet without the header and footer. This post shows the trick, but doesn't say how to apply it. I tried this, but it doesn't work:

<iframe id="embeddedthing" width='500' height='300' frameborder='0' src='https://docs.google.com/spreadsheet/pub?key=<DocId>&single=true&gid=12&output=html&widget=false&gridlines=false'></iframe>
<script type="text/javascript">
  var f = function(id) {document.getElementById(id).style.display = "none";};
  f("header");
  f("footer");
</script>

Then I thought I should apply it to the document loaded in the iframe, so I tried to access it using document.getElementById('FrameId').contentWindow.document, but the browser says "Unsafe JavaScript attempt to access frame" and doesn't allow me to continue.

What is the correct way to run that JavaScript function?

stenci · Accepted Answer · 2015-08-12T14:37:58.627

The easiest way to remove headers and footers from a shared Google sheet in an iframe is to specify the sheet and the range to show.
With the following syntax a sheet appears nice and clean, with the exception of a thin gray border on the top and left edge:

src="https://docs.google.com/spreadsheet/pub?key=<DocID>&gid=<SheetID>&gridlines=false&range=A1:Z100"

Without the range parameter the behavior is affected by the widget=true to show a header row on top or widget=false to show headers, footers and links to the other sheets.
If the specified range is larger than the actual sheet size, the whole sheet is used. So range=A1:Z100 will cover most cases with small tables.

Creating two adjacent iframes allows to do something similar to the frozen column or row headers.
Here is an example of a page that uses this technique to display 2 fixed columns with the headers on the left and a scrollable area on the right:

<table border='1'>
  <tr>
    <td>
      <iframe width="103" height="187" frameborder="0" src="https://docs.google.com/spreadsheet/pub?key=0AqEyi7du69LQdHRJXzViMlhEdHVYY2E4X1hnZ21EQ2c&gid=29&gridlines=false&range=A1:B999"></iframe>
    </td>
    <td>
      <iframe width="600" height="187" frameborder="0" src="https://docs.google.com/spreadsheet/pub?key=0AqEyi7du69LQdHRJXzViMlhEdHVYY2E4X1hnZ21EQ2c&gid=29&gridlines=false&range=C1:CC999"></iframe>
    </td>
  </tr>
</table>

This is the website that uses this technique.

EDIT

Google has changed something and my website is suddenly broken.

The solution as suggested here is to add &widget=false&chrome=false.

score 0 · Answer 2 · edited May 23 '17 at 12:16

Because JS restricts access to frames, you would need to somehow fetch the HTML of the spreadsheet and remove the header and footer from within the page.

You could use a hidden iframe (display: none;) to house the spreadsheet, and then have a second iframe loaded with a page that fetches the HTML of the spreadsheet with this method (requires jQuery), then removes the header and footer. You could do this by getting the HTML, parsing it into a DOM structure, adding in a script element with the f() code, and then using a data: URL to pull up the page.

You could use a base element to preserve links to files; prepend the spreadsheet's original path (but NOT filename) to the base's href if present; otherwise make a new <base href="www.google.com/path/to/spreadsheet/without/filename/" /> in the head. You could fetch the path with a regex on the hidden iframe's src.

May be a bit clunky and certainly could use improvement... but it (hopefully) works!!

Note that this is untested and based on research.

Google spreadsheet without header and footer

2 Answers2