从嵌入的谷歌工作表中删除谷歌边框

我希望将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://i.stack.imgur.com/U1EfH.jpg.我只想要有列的表"；团队；以及"；SCORE"；，有没有办法摆脱谷歌的边界(即"彩色战争评分：Sheet2"和下面的标签(？我一直在寻找去除它的内置方法，它似乎曾经存在过，但现在不再存在了。话虽如此，我觉得应该有一个足够简单的解决方案，可能是JavaScript。我只是不知道该怎么想。

谢谢你的帮助！

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>元素和负的垂直边距来实现您想要的。

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

这里需要的是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>

其他选项的详细信息：谷歌网页嵌入URL文档

相关内容

最新更新

热门标签：