Google 日历标题设置为显示 None

Question

我们 store site 中有一个 google 日历，我们想将标题样式设置为 "display: none"。

到目前为止，这是我们的代码：

<script>
  jQuery(document).ready(function() {
    jQuery('iframe').contents().find('span').css('display', 'none');
  });
</script>

Answer 1

如果您通过检查元素 (F12) 并转到控制台选项卡打开您的控制台，您会看到您遇到的错误：

"jquery-2.1.4.min.js?1013665…:2 Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "https://motorhelmets.com" from accessing a frame with origin "https://calendar.google.com”。协议、域和端口必须匹配。”

Google 域不允许编辑外部域。

然而，由于您要隐藏的内容位于框架的边缘（即顶部），因此您可以使用一些技巧 css 来隐藏它。例如，您提高 iframe 内容或 iframe 本身可以移动得更高从而覆盖标题，或者您可以使用一些 html 元素来覆盖标题。

以下是html遮盖标题的代码。它需要插入到 calendar_iframe div 内，就在 iframe 之前。

<div style="position: absolute;height: 20px;width: 100%;background: white;"></div>

Answer 2

您可以在日历 iframe 的正上方添加一个 div

<div id="hide-calendar-title"></div>
<iframe...>

然后将此 css 应用到 div

#hide-calendar-title {
    position: relative;
    height: 20px;
    top: 20px;
    background-color: white;
}

Answer 3

您可以在 Google 日历中自定义 link。您也可以只添加到 GET 参数。

&showTitle=0

Google 日历标题设置为显示 None

Google Calendar Title Set to Display None

javascript

css

jquery

calendar

google-calendar-api