HTML：尝试从嵌入式 Google 日历中删除元素答案

【问题标题】：HTML: Trying to remove element from embedded Google CalendarHTML：尝试从嵌入式 Google 日历中删除元素
【发布时间】：2017-07-07 16:57:12
【问题描述】：

我使用这样的东西将谷歌日历嵌入到我的 html 中：

<iframe src="https://calendar.google.com/calendar/embed?src=blahblahblahblahblah" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>

我正在尝试删除日历页面上的“+Google 日历”按钮。我可以检查元素并找出我需要更改的内容：

但是，我不明白要更改什么才能将其取出。我尝试将此添加到 style.css 页面：

div.subscribe-image{
    display: none;
}

那没用。如果你知道，请告诉我。

谢谢

【问题讨论】：

标签： html css embed

【解决方案1】：

在检查元素时尝试更改内联样式。

例如：您正在突出显示元素，然后您可以看到它这样说。

style="display: inline-block"

在检查元素时尝试更改该内联样式。

style="display: none"

我的想法是，当 css 样式正在寻找它时，您正在选择尚不存在的东西。对于您的文档，它看到的只是 iFrame，而不是它提取的整个 google 代码，您无法访问 iFrame 中的代码。知道我在说什么吗？

据我所知。我可能错了，也许有解决办法。试试这个，然后我们可以更深入地寻找解决方案。

【讨论】：

是的，如果我将其更改为 style="display: none" 那么它就消失了。但它仍然会为其他人而存在。我猜这个 iFrame 东西不会让我们编辑这些元素。所以我不确定解决这个问题的方法。
嘿，你删除它的意图是什么，是因为品牌令人讨厌吗？有没有办法给我发一个链接来查看这个，这样我就可以检查自己，搞砸它？
这是一个项目，我将这个触摸屏放在教授办公室外面，以信息亭模式显示教授的谷歌日历。我们不希望有人单击该 Google 日历按钮并转到屏幕上的其他位置。
哦，其实我有个想法。如果您获取页面源代码，将 iframe 代码复制到文档中，然后应用样式会怎样。不要使用 iframe，而是复制它导入的代码，然后尝试对其进行样式设置。此外，人们谈论这种“同源政策规则”。请小心，特别是像谷歌这样的公司。我不确定规则是怎么说的，但我认为这是因为广告原因，以及代表谷歌服务的品牌原因。我有一个使用谷歌表单的网站，它有品牌，但试试看。没有理由为什么它不应该工作。
好的，我应该从上到下复制所有的 html 吗？

【解决方案2】：

这是一个<iframe>。那是一个不同的文件。您无权访问它，除非它允许您访问。要理解这个原理，就像您尝试从您的选项卡中更改另一个浏览器选项卡中的某些内容一样。

唯一的选择是删除<iframe>。如果它不允许，你就不能遍历它的DOM。

您正在尝试的内容受same origin policy 规则的约束。如果<iframe> 提供程序允许，您需要设置 Cookie 到标头 CSRF token。

【讨论】：

那么有没有一种方法可以在不使用 iframe 的情况下仍然嵌入日历，以便我可以删除该按钮？
您应该查看 iframe 提供者的文档，如果他们提供了这样的选项。他们很可能需要钱。
@SlinkyMation，假设你有一个选择。您可以覆盖<iframe> 的部分，该部分使用您页面中的元素呈现按钮。但是，做跨浏览器跨设备并不容易。您希望创造性地使用网络机制来禁止用户将<iframe> 滚动到按钮可见的位置。不用说，我很确定如果<iframe> 提供者发现了它，他不会喜欢它。他们一定有理由把那个按钮放在那里。你怎么看？
只能在本地网络服务器上，这不合法吗？
1.我不知道。 2.我不想知道。 3. 这不是编程问题。 4. 如果您担心法律部分，我绝对确定它包含在 iframe 提供商的 T&C 中，而且我也很确定您必须选中一个框，说明您已阅读/同意跟他们。 ||你完全可以无视我之前的言论并尝试去做。提供minimal reproducible example，我什至会帮你做。如：这很难做到。我需要看看它在哪里实施才能提出可行的方法。