HTML5網頁遮罩層 + Iframe實現介面自動顯示的示例程式碼

佚名發表於2020-05-22
HTML網頁遮罩

主要介紹了遮罩層 + Iframe實現介面自動顯示的示例程式碼，文中透過示例程式碼介紹的非常詳細，需要的朋友們下面隨著小編來一起學習學習吧

前言

這周由於科三的考試耽誤了兩天，提前一天要去熟悉考場，第二天要考試，好在第二天晚上趕回來了，兩天沒敲程式碼就感覺彆扭，這周寫了點日誌系統，寫了點作業系統，果然技術還不到家，思路上出了點小問題。

效果

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

Iframe

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>

總結

在寫功能之前，真的要好好看文件，每一種方法都認真看看，不然用的時候真的會吃大虧。

到此這篇關於遮罩層 + Iframe實現介面自動顯示的示例程式碼的文章就介紹到這了,更多相關遮罩層 Iframe介面自動顯示內容請搜尋以前的文章或繼續瀏覽下面的相關文章

相關文章