Mask层+Iframe实现界面自动显示

时间：2023-04-04 22:56:15 HTML5

前言这周因为第三科的考试延期，不得不提前一天去考场，考试了明天。好在第二天晚上就回来了，这两天不敲代码都觉得别扭。这周我写了一些日志系统和一些操作系统。果然技术还没到家，思路上有些小问题。效果是老师评作业时，先展示学生的作业，然后关闭评分界面（以百度首页为例）。URL">URL指向隔离页面的位置，由于当时对src的误解，没有选择这种方式。

W3School.com.cn

如果想让iframe显示的内容a标签中的链接，必须使iframe标签中的name属性与a标签中的target属性相等，显示相应的内容。所以当时的代码是：

点击查看

publicload(){this.workService.getById({id:this.params.workId}).subscribe((data)=>{this.work=data;this.goToWork();},()=>{控制台.log('错误');});}goToWork():void{th??is.linkToWork.nativeElement.click();}当时效果是这样的，但是有一个很大的缺陷，就是显示网页的窗口很小，而且学生的作业根本看不到，需要拖动底部和侧边栏的滚动条。iframe+masklayermask层就是把下面的界面屏蔽掉，然后让iframe的内容显示在mask层上，从而实现全屏显示学生作业内容的效果，代码为如下：

点击查看

关于遮罩层的使用，可以看看这个文档：5自定义提示框【之前】问题使用属性showPopWindow来控制遮罩层是否显示，然后出现这样的问题：这个说明#inkToWork所在的a标签的内容没有被渲染，所以找不到这个元素，无法点击它。一开始控制遮罩层的变量是true，但是里面的内容无法渲染。后来解决了。时间长了，就不行了。晚上开会解决这个问题，才发现这个问题其实很好解决，但是却钻进了死胡同，一直以为src加到文件里，现在才知道链接可以补充一下，因为当时文档不是很清楚嘛，所以改成了这样："100%"src="https://www.baidu.com/">Exitpreview

总结写函数之前，真的要认真看文档，认真看每一个方法，不然用起来真的会很吃亏。杂谈这次三考遇到了很多事情，让我对人性有了进一步的了解，觉得自己还是天真了很多。第一天，我要先去熟悉一下场地，然后大家跑了三圈，但没有一个人通过。感觉不多，后来发现还可以多练。我加了三圈多了RMB。第一圈因为对车不熟（和之前练习不同）失败了，但是后面两圈就通过了，感觉没什么问题。.考试结束后，我在车上还挺紧张的，可是上了车，我发现我一点都不紧张了。前面很顺利，直到我在最后一个路口转弯。转过这个弯，走个几十米就可以停了，可是刚走到路口，就看到左边有一个骑着电动三轮车的老人。他没有放慢脚步就走了过来。我停了下来，然后就走了。第二次是因为一个路人停在了马路中间，然后因为其他原因，我走了。然后我想，如果我在练习的时候遇到这种情况，然后问怎么办，是不是就万无一失了？下次再遇到这个问题就不是问题了。希望下次考试不要遇到过马路不减速的老人。