javascript - HTML/CSS/JS切换不同谷歌日历是同一个框架

Question

我有多个 Google 日历，我想在网站上的一个框架内显示它们。通勤调用应该动态改变。如果可能的话请告诉我。我在下面提供了示例代码。

<a href="<iframe src="https://calendar.google.com/calendar/embed?src" class="btn btn-default" >Calendery_1 </a>
<a href="<iframe src="https://calendar.google.com/calendar/embed?src" class="btn btn-default" >Calendery_2 </a>
<a href="<iframe src="https://calendar.google.com/calendar/embed?src" class="btn btn-default" >Calendery_3 </a>
<a href="<iframe src="https://calendar.google.com/calendar/embed?src" class="btn btn-default" >Calendery_4 </a>

Answer 1

可以通过 3 种不同的方式更改 src 元素 - 使用纯 HTML、使用简单的 JavaScript 或使用 jQuery。选择哪一种取决于您的要求。下面是一个简单的 HTML 响应。我尝试了以下两种解决方案，效果很好

HTML 方法

   <p>Click on link bellow to change iframe content:</p>
         <a href="https://calendar.google.com/calendar/embed?src=81fmklm3e8fmar82p72jc89ld4%40group.calendar.google.com&ctz=Asia/Calcutta" target="search_iframe">TechMocktail</a> -
        <a href="https://calendar.google.com/calendar/embed?src=cl5g5tm0fuj0ras7jr5bk29khs%40group.calendar.google.com&ctz=Asia/Calcutta" target="search_iframe">TechMocktail Course</a> 

        <iframe src="http://en.wikipedia.org" style="border: 0" width="100%" height="300" frameborder="0" scrolling="no" name="search_iframe"></iframe>

我创建了两个 Google 日历并尝试了上面的示例。请告诉我这是否有帮助或者您是否需要更多详细信息。

JavaScript 方法

function go(loc) {
            document.getElementById('calendar').src = loc;
        }

<iframe id="calendar" src="about:blank" width="1000" height="450" frameborder="0" scrolling="no"></iframe>

    <form method="post">
        <input name="calendarSelection" type="button" Value=" Calendar1" onclick="go('https://calendar.google.com/calendar/embed?src=81fmklm3e8fmar82p72jc89ld4%40group.calendar.google.com&ctz=Asia/Calcutta')" />
        <input name="calendarSelection" type="button" value=" Calendar2" onclick="go('https://calendar.google.com/calendar/embed?src=cl5g5tm0fuj0ras7jr5bk29khs%40group.calendar.google.com&ctz=Asia/Calcutta')" />
        <input name="calendarSelection" type="button" value=" Wikipedia"  onclick="go('http://en.wikipedia.org')" />
    </form>