遮罩層 + Iframe實現界面自動顯示

前言

這周因爲科三的考試耽誤了兩天，提早一天要去熟悉考場，次日要考試，好在次日晚上趕回來了，兩天沒敲代碼就感受彆扭，這周寫了點日誌系統，寫了點做業系統，果真技術還不到家，思路上出了點小問題。

效果

在教師評閱做業時，先把學生的做業展示出來，而後關掉界面進行評分
（用百度主頁作演示）

Ifream

iframe 用於在網頁內顯示網頁，實現它的方法有多種：

<iframe src="URL"></iframe>

URL 指向隔離頁面的位置，因爲當時對src有誤解，因此沒有選用這種方法。

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>

要想讓iframe顯示a標籤裏連接的內容，就要使得iframe標籤裏的name屬性與a標籤裏的target屬性相等，這樣的話，點擊a標籤的連接就能在iframe裏顯示相應的內容了。
因而當時的代碼是：

<iframe height="500px" width="100%" name="iframe_work"></iframe>
<p><a target="iframe_work" style="display: none"
[href]="protocol + '//' + (this.work.student.no + '.' + host + '/' + getWorkDir()) | safeUrl"
#linkToWork>點擊查看</a>
</p>

public load() {
    this.workService.getById({id: this.params.workId})
      .subscribe((data) => {
        this.work = data;
        this.goToWork();
      }, () => {
        console.log('error');
      });
  }

goToWork(): void {
this.linkToWork.nativeElement.click();
}

當時出來的效果是這樣的可是有很大的缺陷，就是顯示網頁的窗口很小，學生的做業根本看不全，須要拖動底部和側欄的滾動條。

Iframe + 遮罩層

遮罩層就是爲了把下方的界面擋起來，而後讓ifream的內容顯示在遮罩層上，以實現全屏顯示學生做業內容的效果，代碼以下：

<div class="mask" *ngIf="showPopWindow">
 <iframe  class="popWindow"  height="500px" width="100%" name="iframe_work"></iframe>
<p><a target="iframe_work" style="display: none"
[href]="protocol + '//' + (this.work.student.no + '.' + host + '/' + getWorkDir()) | safeUrl"
#linkToWork>點擊查看</a>
</p>
</div>

有關遮罩層的使用能夠看一下這個文檔：5 定製提示框【前】

問題

利用showPopWindow這個屬性控制遮罩層顯示與否，後來就出現了這樣的問題：

這就說明 #inkToWork 所在的a標籤的內容還未渲染出來，那找這個元素就找不到，也就無法實現點擊，一開始控制遮罩層的變量爲true，可是裏面的內容渲染不出來，後來解決了很久，也是不行。

解決

後來晚上開會的時候說了這個問題，才發現這個問題真的挺好解決的，可是本身鑽牛角尖了，以前一直覺得src加的是文件，如今才知道能加連接，也是當時文檔沒看太明白吧，後來就改爲了這個樣子：

<div class="mask" *ngIf="showPopWindow">
  <iframe class="popWindow" height="94%" width="100%"  src="https://www.baidu.com/"></iframe>
  <button type="button" class="btn btn-primary btn-lg btn-block" (click)="exitPopWindow()">退出預覽</button>
</div>

總結

在寫功能以前，真的要好好看文檔，每一種方法都認真看看，否則用的時候真的會吃大虧。

雜談

此次考科三遇到了不少事情，讓我進一步認識到了人性，感受本身仍是單純好多，第一天要過去熟悉場地，而後每一個人跑了三圈，可是咱們車上一個過的都沒有，感受也沒啥，後來才知道能加練，N多RMB加三圈，第一圈由於不熟悉車（跟以前練的不同）不及格，然後的兩圈都過了，感受也沒有問題了。後來考試了，坐車上挺緊張的，可是開上車發現本身一點也不緊張，前面跑的都挺順的，直到最後一個路口轉彎，這個彎轉過去，再走幾十米我就能停車了，可是我在路口剛起步，就看到左邊來了個騎電三輪的大爺，絕不減速就過來了，我就停車了，而後我就沒了，第二次是由於一個路人路中央停車，而後由於其餘緣由，我就沒了。後來想了想，若是當時練習的時候遇到這狀況，而後問一下該怎麼作，是否是就萬無一失了，其實代碼也是這樣，不知道會出現什麼樣的問題，可是多嘗試，多問，那麼下次遇到這問題也就不是問題了。但願下次考試不會趕上過馬路不減速的老大爺吧。