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?

Answer 1

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.