从其他网站加载内容

Question

我正在尝试将5个日历从Outlook加载到我的网站中。我创建了选项卡，使用户可以一次浏览所有日历。

我正在使用iframe来显示日历。但是，这似乎是一种无法预测且缓慢的显示日历的方式。

尽管加载时间不是一个大问题。我似乎也收到错误（有时）。

以下是我遇到的错误的一个示例：

在上面的示例中，如果要刷新页面，则将显示日历。我正在努力避免这些类型的不一致。

在某些情况下，日历中只会显示一部分。

我想知道：

我是否仍然需要改进我的代码，以便这些日历出现而不会出现任何问题？

请记住：

1. 用户当前可以与日历进行交互
2. 我尝试了嵌入和对象（转到下一个选项卡后都取消了与日历交互的功能）

我的代码：

<div id="page-wrapper">
        
            <div class="pc-tab">
<input checked="checked" id="tab1" type="radio" name="pct" />
<input id="tab2" type="radio" name="pct" />
<input id="tab3" type="radio" name="pct" />
<input id="tab4" type="radio" name="pct" />
<input id="tab5" type="radio" name="pct" />                
  <nav>
    <ul>
      <li class="tab1">
        <label style="font-weight:1px; color: #7cadaa;  font-family:GothamProMedium; font-size:12px;" for="tab1">Room 5</label>
      </li>
      <li class="tab2">
        <label style="font-weight:1px; color: #7cadaa;  font-family:GothamProMedium; font-size:12px;"  for="tab2">Room 4</label>
      </li>
      <li class="tab3">
        <label  style="font-weight:1px; color: #7cadaa;  font-family:GothamProMedium; font-size:12px;"  for="tab3">Room 3</label>
      </li>
      <li class="tab4">
        <label  style="font-weight:1px; color: #7cadaa;  font-family:GothamProMedium; font-size:12px;"  for="tab4">Room 2</label>
      </li>
      <li class="tab5">
        <label  style="font-weight:1px; color: #7cadaa;  font-family:GothamProMedium; font-size:12px;"  for="tab5">Room 1</label>
      </li>
    </ul>
  </nav>
  <section>
    <div class="tab1">
      <h6>First</h6>
             <style unselectable="on">

            #frame {
            width:100%;
            height:40vw;
            position:relative;
            left:0px;
            top:0px;
            border: none;
            }
            #frame {
            -ms-zoom:0.7;
            }
            </style>
            <div id="wrap" unselectable="on" seamless>
                <iframe id="frame" src="></iframe>
            </div>
       
    </div>
      
      
      
    <div class="tab2">
      <h6>First</h6>
             <style unselectable="on">

            #frame {
            width:100%;
            height:40vw;
            position:relative;
            left:0px;
            top:0px;
            border: none;
            }
            #frame {
            -ms-zoom:0.7;
            }
            </style>
            <div id="wrap" unselectable="on" seamless>
                <iframe id="frame" src=""></iframe>
            </div>
       
    </div>
    <div class="tab3">
      <h6>First</h6>
             <style unselectable="on">

            #frame {
            width:100%;
            height:40vw;
            position:relative;
            left:0px;
            top:0px;
            border: none;
            }
            #frame {
            -ms-zoom:0.7;
            }
            </style>
            <div id="wrap" unselectable="on" seamless>
                <iframe id="frame" src=""></iframe>
            </div>
       
    </div>
    <div class="tab4">
      <h6>First</h6>
             <style unselectable="on">

            #frame {
            width:100%;
            height:40vw;
            position:relative;
            left:0px;
            top:0px;
            border: none;
            }
            #frame {
            -ms-zoom:0.7;
            }
            </style>
            <div id="wrap" unselectable="on" seamless>
                <iframe id="frame" src=""></iframe>
            </div>
       
    </div>
    <div class="tab5">
      <h6>First</h6>
             <style unselectable="on">

            #frame {
            width:100%;
            height:40vw;
            position:relative;
            left:0px;
            top:0px;
            border: none;
            }
            #frame {
            -ms-zoom:0.7;
            }
            </style>
            <div id="wrap" unselectable="on" seamless>
                <iframe id="frame" src=""></iframe>
            </div>
       
    </div>
  </section>
</div>

P.S。由于隐私原因，我删除了日历的“ src”。如果您有兴趣模仿，请使用自己的Outlook日历。只需转到Outlook并请求发布日历即可。将提供一个链接。该链接可用于显示日历。

此外，请记住，在这种情况下，安全是重中之重。我听说AJAX可能存在安全问题，但我不是100％熟悉它。