Question

我想嵌入没有页眉和页脚的Google电子表格。 This post显示了这个技巧，但没有说明如何应用它。我试过这个，但它不起作用：

<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>

然后我认为我应该将其应用于iframe中加载的文档，因此我尝试使用document.getElementById('FrameId').contentWindow.document访问它，但浏览器显示“不安全的JavaScript尝试访问框架”并且不允许我继续。

运行该JavaScript函数的正确方法是什么？

Answer 1

从iframe中的共享Google工作表中删除页眉和页脚的最简单方法是指定工作表和要显示的范围。
使用以下语法，工作表显得干净整洁，但顶部和左边缘的灰色边框除外：

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

如果没有range参数，行为会受widget=true影响，以在顶部显示标题行，或widget=false显示标题，页脚和指向其他工作表的链接。
如果指定的range大于实际纸张尺寸，则使用整个纸张。所以range=A1:Z100将涵盖大多数小桌子的情况。

创建两个相邻的iframe可以执行类似于冻结列或行标题的操作下面是一个页面示例，该页面使用此技术显示2个固定列，左侧是标题，右侧是可滚动区域：

<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是使用此技术的网站。

修改

谷歌改变了一些东西，我的网站突然崩溃了。

建议的解决方案here是添加&widget=false&chrome=false。

Answer 2

由于JS限制了对框架的访问，因此您需要以某种方式获取电子表格的HTML并从页面中删除页眉和页脚。

您可以使用隐藏的iframe（display: none;）来容纳电子表格，然后让第二个iframe加载一个页面，该页面用{{3}获取电子表格的HTML然后删除页眉和页脚。您可以通过获取HTML this method (requires jQuery)，使用f（）代码添加script元素，然后使用data:网址来提取页面来实现此目的。

您可以使用base元素来保留文件的链接;将电子表格的原始路径（但不是文件名）添加到base的{{1}}（如果存在）;否则在href中新建<base href="www.google.com/path/to/spreadsheet/without/filename/" />。您可以在隐藏的head iframe上使用正则表达式获取路径。

可能有点笨重，当然可以使用改进......但它（希望）有效!!

请注意，这是未经测试的，并且基于研究。

没有页眉和页脚的Google电子表格

2 个答案: