logo标签列表

从嵌入的Google表格中移除Google边框

javascripthtmlcssgoogle-apps-scriptgoogle-sheets
4

我想将一个Google表嵌入到一个Google扩展中，方法很简单——只需使用自动生成的嵌入代码并将其放入HTML文件中即可。这是我所做的：

<html>
  <link rel="stylesheet" href="extension.css">
  <iframe
    width="250px"
    height="250px"
    src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQhhQM1ag9M_exkDEV8omFWuI5-4tRizOZ5pl0ZzxpAEJ3rHfWzWilEzjgV4jwpyEj2aaTUkfQx6DRK/pubhtml?gid=1478993491&amp;single=true&amp;widget=true&amp;headers=false">
  </iframe>
</html>

结果如下：
https://imgur.com/CopCfvL。我只想要“TEAM”和“SCORE”这两列的表格，有没有办法去掉Google边框（即“Color Wars Scoring：Sheet2”和下面的选项卡）？我已经寻找了内置的方法来删除它，但似乎曾经有过这样的方法，但现在没有了。话虽如此，我觉得应该有一种简单的解决方法，可能需要使用JavaScript。我只是不知道怎么做。谢谢您的帮助！
2个回答
5

iframe {
  margin-top: -30px; /* Cut off top bar */
  margin-bottom: -30px; /* Cut off bottom bar */
}

div {
  overflow: hidden; /* Makes cutoff work */
  border: 2px solid black; /* Just for aesthetics, can be removed */
  display: inline-block; /* Fit div to contents */
}
<html>
  <link rel="stylesheet" href="extension.css">
  <div>
  <iframe
    width="250px"
    height="250px"
    src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQhhQM1ag9M_exkDEV8omFWuI5-4tRizOZ5pl0ZzxpAEJ3rHfWzWilEzjgV4jwpyEj2aaTUkfQx6DRK/pubhtml?gid=1478993491&amp;single=true&amp;widget=true&amp;headers=false">
  </iframe>
  </div>
</html>

虽然不太美观，但我认为我们可以使用容器<div>元素和负垂直边距来实现您想要的效果。

0

您可以编辑查询字符串参数来隐藏顶部和底部栏。

您需要的是 chrome=false（隐藏上方标题）和 widget=false（隐藏下方选项卡）：

<html>
  <iframe
    height="170"
    width="450"
    frameBorder="0"
    src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQhhQM1ag9M_exkDEV8omFWuI5-4tRizOZ5pl0ZzxpAEJ3rHfWzWilEzjgV4jwpyEj2aaTUkfQx6DRK/pubhtml?gid=1478993491&single=true&widget=false&headers=false&chrome=false">
  </iframe>
</html>

其他选项的详细信息在这里：Google表格嵌入URL文档

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接