从Excel嵌入的iFrame中移除底栏

1 人关注

我想在Wordpress网站上嵌入一个带有公式和一些计算的Excel表格。我成功地设置和显示了工作表，并能在我的网站上与它进行互动。我用于嵌入的指南如下。 https://support.office.com/en-us/article/Share-it-Embed-an-Excel-workbook-on-your-web-page-or-blog-from-OneDrive-804e1845-5662-487e-9b38-f96307144081?CorrelationId=2f1048d2-df73-470f-b3a5-c65576288a04&ui=en-US&rs=en-US&ad=US&ocmsassetID=HA102029502

现在，我只需要一个帮助，那就是去掉预装了微软嵌入代码的底部黑条。请参考下面，我在这里用红色标出。我之所以要去掉它，是为了防止用户从我的网站上下载Excel。

html

css

excel

wordpress

iframe

user7219004

发布于 2016-11-28

1 个回答

Soul Eeater

发布于 2018-01-26

0 人赞同

我知道这是一个非常老的问题，但我希望这能帮助到将来的人。当你在浏览器中 "检查 "这个元素时，你可能意识到excel嵌入的元素里面有另一个iframe!这个iframe有一个ID叫 "WebApplicationFrame" ，底栏就在这第二个iframe里面。
我试着用JS给底栏添加 "display: none " 来隐藏它，但由于某些原因，它并不工作。所以我的方法是把 "WebApplicationFrame "的高度做大。

<iframe id="excel-iframe" scrolling="no" src="YOUR_EXCEL_EMBED_URL" width="600" height="500" frameborder="0"></iframe>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
   $(document).ready(function() {
      $("#excel-iframe").load(function() {
         $(this).contents().find("#WebApplicationFrame").css("height", "550px");
</script>
注意在我的代码中，你嵌入excel的iframe的高度是500（像素），而在Javascript代码中，我给iframe内的高度是550px。这样一来，内部iframe的底栏就在视口之外了。 
现在，也许你并不关心隐藏底栏，你可能只想禁用 "下载 "按钮。如果你观察你的嵌入URL，其中有一部分是这样说的。