Question

我们的store site中有一个Google日历，我们希望将标题样式设置为＆＃34; display：none＆＃34;。

到目前为止我们的代码：

<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：无法从'HTMLIFrameElement'读取'contentDocument'属性：阻止来自”https://motorhelmets.com“的框架访问框架原点为“https://calendar.google.com”。协议，域和端口必须匹配。“

Google域名不允许从外部域名进行编辑。

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

以下是用于掩盖标题的html代码。它需要插入到iframe之前的 calendar_iframe div中。

<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 Calender中自定义链接。您也可以只添加GET参数。

＆showTitle = 0

Google日历标题设置为无显示

3 个答案: