欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

遮罩層 + Iframe實現(xiàn)界面自動顯示的示例代碼

  發(fā)布時間：2020-04-26 16:03:18   作者：錦城   我要評論
這篇文章主要介紹了遮罩層 + Iframe實現(xiàn)界面自動顯示的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

前言

這周由于科三的考試耽誤了兩天，提前一天要去熟悉考場，第二天要考試，好在第二天晚上趕回來了，兩天沒敲代碼就感覺別扭，這周寫了點日志系統(tǒng)，寫了點作業(yè)系統(tǒng)，果然技術還不到家，思路上出了點小問題。

效果

在教師評閱作業(yè)時，先把學生的作業(yè)展現(xiàn)出來，然后關掉界面進行評分
（用百度主頁做演示）

Iframe

iframe 用于在網(wǎng)頁內(nèi)顯示網(wǎng)頁，實現(xiàn)它的方法有多種：

<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標簽里鏈接的內(nèi)容，就要使得iframe標簽里的name屬性與a標簽里的target屬性相等，這樣的話，點擊a標簽的鏈接就能在iframe里顯示相應的內(nèi)容了。
于是當時的代碼是：

<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();
}

當時出來的效果是這樣的但是有很大的缺陷，就是顯示網(wǎng)頁的窗口很小，學生的作業(yè)根本看不全，需要拖動底部和側(cè)欄的滾動條。

Iframe + 遮罩層

遮罩層就是為了把下方的界面擋起來，然后讓ifream的內(nèi)容顯示在遮罩層上，以實現(xiàn)全屏顯示學生作業(yè)內(nèi)容的效果，代碼如下：

<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這個屬性控制遮罩層顯示與否，后來就出現(xiàn)了這樣的問題：


 

這就說明 #inkToWork 所在的a標簽的內(nèi)容還未渲染出來，那找這個元素就找不到，也就沒法實現(xiàn)點擊，一開始控制遮罩層的變量為true，但是里面的內(nèi)容渲染不出來，后來解決了好久，也是不行。

解決

后來晚上開會的時候說了這個問題，才發(fā)現(xiàn)這個問題真的挺好解決的，但是自己鉆牛角尖了，之前一直以為src加的是文件，現(xiàn)在才知道能加鏈接，也是當時文檔沒看太明白吧，后來就改成了這個樣子：

<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>

總結(jié)

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

到此這篇關于遮罩層 + Iframe實現(xiàn)界面自動顯示的示例代碼的文章就介紹到這了,更多相關遮罩層 Iframe界面自動顯示內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！

相關文章

  • HTML實現(xiàn)遮罩層的方法 HTML中如何使用遮罩層

    這篇文章主要為大家詳細介紹了HTML實現(xiàn)遮罩層的方法，Web頁面中使用遮罩層，可防止重復操作，那么如何在HTML中使用遮罩層？感興趣的小伙伴們可以參考一下
    2016-03-25

  • 彈出一個遮罩層有正在加載效果的文字

    彈出一個遮罩層有正在加載效果的文字，在很多場景都有看到過，下面為大家介紹下具體的實現(xiàn)
    2014-04-17

  • DIV遮罩層如何實現(xiàn)

    今天有任務讓加個蒙版，JS小白的我在網(wǎng)上找了個修改下，改成了JS模版以后可以重復用啦,本文將詳細介紹DIV遮罩層如何實現(xiàn)，需要的 朋友可以參考下
    2012-11-20

  • div背景半透明，覆蓋整個可視區(qū)域的遮罩層效果

    背景半透明，覆蓋整個可視區(qū)域的遮罩層效果在工作中經(jīng)常會遇到，這篇文章主要介紹了當內(nèi)容超過一屏時如何做到多瀏覽器的兼容性。 下面我們通過一個簡單的例子看看如何實現(xiàn)
    2011-12-08

  • div背景半透明 覆蓋整個可視區(qū)域的遮罩層效果

    背景半透明，覆蓋整個可視區(qū)域的遮罩層效果在工作中經(jīng)常會遇到，這篇文章主要介紹了當內(nèi)容超過一屏時如何做到多瀏覽器的兼容性。 下面我們通過一個簡單的例子看看如何實現(xiàn)
    2011-10-30

  • Html5頁面點擊遮罩層背景關閉遮罩層

    這篇文章主要介紹了Html5頁面點擊遮罩層背景關閉遮罩層，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起
    2020-11-30

最新評論