javascript 没有页眉和页脚的 Google 电子表格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14371366/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google spreadsheet without header and footer
提问by stenci
I want to embed a Google spreadsheet without the header and footer. This postshows the trick, but doesn't say how to apply it. I tried this, but it doesn't work:
我想嵌入一个没有页眉和页脚的 Google 电子表格。这篇文章展示了这个技巧，但没有说明如何应用它。我试过这个，但它不起作用：
<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.
然后我想我应该将它应用到 iframe 中加载的文档，所以我尝试使用 访问它document.getElementById('FrameId').contentWindow.document，但浏览器显示“不安全的 JavaScript 尝试访问框架”并且不允许我继续。
What is the correct way to run that JavaScript function?
运行该 JavaScript 函数的正确方法是什么？
回答by stenci
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:
从 iframe 中的共享 Google 工作表中删除页眉和页脚的最简单方法是指定工作表和要显示的范围。
使用以下语法，工作表看起来干净整洁，但顶部和左侧边缘有一个细灰色边框：
src="https://docs.google.com/spreadsheet/pub?key=<DocID>&gid=<SheetID>&gridlines=false&range=A1:Z100"
src="https://docs.google.com/spreadsheet/pub?key=<DocID>&gid=<SheetID>&gridlines=false&range=A1:Z100"
Without the rangeparameter the behavior is affected by the widget=trueto show a header row on top or widget=falseto show headers, footers and links to the other sheets.
If the specified rangeis larger than the actual sheet size, the whole sheet is used. So range=A1:Z100will cover most cases with small tables.
如果没有range参数，行为会受到widget=true在顶部显示标题行或widget=false显示页眉、页脚和指向其他工作表的链接的影响。
如果指定range的尺寸大于实际的图纸尺寸，则使用整张图纸。所以range=A1:Z100将涵盖大多数小表的情况。
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:
创建两个相邻的 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>
Thisis the website that uses this technique.
这是使用这种技术的网站。
EDIT
编辑
Google has changed something and my website is suddenly broken.
谷歌改变了一些东西，我的网站突然坏了。
The solution as suggested hereis to add &widget=false&chrome=false.
此处建议的解决方案是添加&widget=false&chrome=false.
回答by ameed
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.
因为 JS 限制对框架的访问，您需要以某种方式获取电子表格的 HTML 并从页面中删除页眉和页脚。
You could use a hidden iframe(display: none;) to house the spreadsheet, and then have a second iframeloaded 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 scriptelement with the f() code, and then using a data:URL to pull up the page.
您可以使用隐藏的iframe( display: none;) 来容纳电子表格，然后再iframe加载一个页面，该页面使用此方法（需要 jQuery）获取电子表格的 HTML ，然后删除页眉和页脚。您可以通过获取 HTML、将其解析为 DOM 结构、添加script具有 f() 代码的元素，然后使用data:URL 来拉出页面来完成此操作。
You could use a baseelement to preserve links to files; prepend the spreadsheet's original path (but NOT filename) to the base's hrefif 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.
您可以使用base元素来保留文件链接；将电子表格的原始路径（但不是文件名）添加到base'shref如果存在；否则<base href="www.google.com/path/to/spreadsheet/without/filename/" />在head. 你可以对隐藏的正则表达式获取路径iframe的src。
May be a bit clunky and certainly could use improvement... but it (hopefully) works!!
可能有点笨重，当然可以改进……但它（希望）有效！！
Note that this is untested and based on research.
请注意，这是未经测试且基于研究的。
