前言
這周由于科三的考試耽誤了兩天,提前一天要去熟悉考場,第二天要考試,好在第二天晚上趕回來了,兩天沒敲代碼就感覺別扭,這周寫了點(diǎn)日志系統(tǒng),寫了點(diǎn)作業(yè)系統(tǒng),果然技術(shù)還不到家,思路上出了點(diǎn)小問題。
效果
在教師評閱作業(yè)時(shí),先把學(xué)生的作業(yè)展現(xiàn)出來,然后關(guān)掉界面進(jìn)行評分
(用百度主頁做演示)
Iframe
iframe 用于在網(wǎng)頁內(nèi)顯示網(wǎng)頁,實(shí)現(xiàn)它的方法有多種:
<iframe src="URL"></iframe>
URL 指向隔離頁面的位置,由于當(dāng)時(shí)對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標(biāo)簽里鏈接的內(nèi)容,就要使得iframe標(biāo)簽里的name屬性與a標(biāo)簽里的target屬性相等,這樣的話,點(diǎn)擊a標(biāo)簽的鏈接就能在iframe里顯示相應(yīng)的內(nèi)容了。
于是當(dāng)時(shí)的代碼是:
<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>點(diǎn)擊查看</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();
}
當(dāng)時(shí)出來的效果是這樣的但是有很大的缺陷,就是顯示網(wǎng)頁的窗口很小,學(xué)生的作業(yè)根本看不全,需要拖動(dòng)底部和側(cè)欄的滾動(dòng)條。
Iframe + 遮罩層
遮罩層就是為了把下方的界面擋起來,然后讓ifream的內(nèi)容顯示在遮罩層上,以實(shí)現(xiàn)全屏顯示學(xué)生作業(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>點(diǎn)擊查看</a>
</p>
</div>
有關(guān)遮罩層的使用可以看一下這個(gè)文檔:5 定制提示框【前】
問題
利用showPopWindow這個(gè)屬性控制遮罩層顯示與否,后來就出現(xiàn)了這樣的問題:
這就說明 #inkToWork 所在的a標(biāo)簽的內(nèi)容還未渲染出來,那找這個(gè)元素就找不到,也就沒法實(shí)現(xiàn)點(diǎn)擊,一開始控制遮罩層的變量為true,但是里面的內(nèi)容渲染不出來,后來解決了好久,也是不行。
解決
后來晚上開會(huì)的時(shí)候說了這個(gè)問題,才發(fā)現(xiàn)這個(gè)問題真的挺好解決的,但是自己鉆牛角尖了,之前一直以為src加的是文件,現(xiàn)在才知道能加鏈接,也是當(dāng)時(shí)文檔沒看太明白吧,后來就改成了這個(gè)樣子:
<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()">退出預(yù)覽</button>
</div>
總結(jié)
在寫功能之前,真的要好好看文檔,每一種方法都認(rèn)真看看,不然用的時(shí)候真的會(huì)吃大虧。
到此這篇關(guān)于遮罩層 + Iframe實(shí)現(xiàn)界面自動(dòng)顯示的示例代碼的文章就介紹到這了,更多相關(guān)遮罩層 Iframe界面自動(dòng)顯示內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!