序言
这周因为科3的考試耽搁了两天，提早1天要去熟习考场，第2天要考試，好在第2天夜里赶回家了，两天没敲编码就觉得别扭，这周写了点系统日志系统软件，写了点工作系统软件，果真技术性还不到家，思路上出了点小难题。
实际效果
在教师评阅工作时，先把学员的工作呈现出来，随后关闭页面开展评分
（用百度搜索首页做演试）
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>
相关遮罩层的应用能够看1下这个文本文档：5 订制提醒框【前】
难题
运用showPopWindow这个特性操纵遮罩层显示信息与否，后来就出現了这样的难题：
这就表明 #inkToWork 所属的a标识的內容还未3D渲染出来，那找这个元素就找不到，也就无法完成点一下，1刚开始操纵遮罩层的自变量为true，可是里边的內容3D渲染不出来，后来处理了好长时间，也是不好。
处理
后来夜里开会的情况下说了这个难题，才发现这个难题真的挺好处理的，可是自身钻牛角尖了，以前1直认为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页面全自动显示信息內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容，期待大伙儿之后多多适用脚本制作之家！
Copyright © 2002-2020 自助建站_专业建站_建站网站_建站平台_网站在线制作app 版权所有 （网站地图） 粤ICP备10235580号