遮罩层 + Iframe实现界面自动显示的示例代码


Posted in HTML / CSS onApril 26, 2020

前言

这周由于科三的考试耽误了两天,提前一天要去熟悉考场,第二天要考试,好在第二天晚上赶回来了,两天没敲代码就感觉别扭,这周写了点日志系统,写了点作业系统,果然技术还不到家,思路上出了点小问题。

效果

在教师评阅作业时,先把学生的作业展现出来,然后关掉界面进行评分
(用百度主页做演示)

遮罩层 + 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实现界面自动显示的示例代码

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这个属性控制遮罩层显示与否,后来就出现了这样的问题:

遮罩层 + Iframe实现界面自动显示的示例代码
 

这就说明 #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界面自动显示内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3 制作旋转的大风车(充满童年回忆)
Jan 30 HTML / CSS
CSS3绘制超炫的上下起伏波动进度加载动画
Apr 21 HTML / CSS
详解HTML5表单新增属性
Dec 21 HTML / CSS
html5/css3响应式页面开发总结
Oct 16 HTML / CSS
IE10 Error.stack 让脚本调试更加方便快捷
Apr 22 HTML / CSS
html5 canvas实现圆形时钟代码分享
Dec 25 HTML / CSS
html5使用canvas画一条线
Dec 15 HTML / CSS
通过HTML5 Canvas API绘制弧线和圆形的教程
Mar 14 HTML / CSS
HTML5之语义标签介绍
Jul 07 HTML / CSS
使用Html5中的cavas画一面国旗
Sep 25 HTML / CSS
HTML5中的网络存储实现方式
Apr 28 HTML / CSS
canvas实现图片镜像翻转的2种方式
Jul 22 HTML / CSS
html5中使用hotcss.js实现手机端自适配的方法
Apr 23 #HTML / CSS
html5 canvas 实现光线沿不规则路径运动
Apr 20 #HTML / CSS
基于HTML5+tracking.js实现刷脸支付功能
Apr 16 #HTML / CSS
HTML中meta标签及Keywords
Apr 15 #HTML / CSS
详解移动端h5页面根据屏幕适配的四种方案
Apr 15 #HTML / CSS
html5移动端自适应布局的实现
Apr 15 #HTML / CSS
HTML里显示pdf、word、xls、ppt的方法示例
Apr 14 #HTML / CSS
You might like
PHP 出现乱码和Sessions验证问题的解决方法!
2008/12/06 PHP
简单的移动设备检测PHP脚本代码
2011/02/19 PHP
详解PHP中strlen和mb_strlen函数的区别
2014/03/07 PHP
详解CSS样式中的 !important * _ 符号
2021/03/09 HTML / CSS
javascript操作文本框readOnly
2007/05/15 Javascript
jQuery拖拽 &amp; 弹出层 介绍与示例
2013/12/27 Javascript
动态创建script标签实现跨域资源访问的方法介绍
2014/02/28 Javascript
node.js调用C++开发的模块实例
2015/07/03 Javascript
JavaScript实现带箭头标识的多级下拉菜单效果
2015/08/27 Javascript
Javascript获取图片原始宽度和高度的方法详解
2016/09/20 Javascript
jquery在启动页面时,自动加载数据的实例
2018/01/22 jQuery
vue通过路由实现页面刷新的方法
2018/01/25 Javascript
详解Vue单元测试Karma+Mocha学习笔记
2018/01/31 Javascript
JavaScript new对象的四个过程实例浅析
2018/07/31 Javascript
[52:31]VP vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python实现批量转换文件编码(批转换编码示例)
2014/01/23 Python
python脚本实现查找webshell的方法
2014/07/31 Python
python opencv之SURF算法示例
2018/02/24 Python
python3+PyQt5实现自定义分数滑块部件
2018/04/24 Python
Python基于多线程实现ping扫描功能示例
2018/07/23 Python
使用python分析统计自己微信朋友的信息
2019/07/19 Python
Python字符串处理的8招秘籍(小结)
2019/08/13 Python
中国首家奢侈品O2O网购平台:第五大道奢侈品网
2017/12/14 全球购物
英国奢侈品概念店:Base Blu
2019/05/16 全球购物
Brasty罗马尼亚:购买手表、香水、化妆品、珠宝
2020/04/21 全球购物
人力资源部门的主要职能
2014/02/22 职场文书
关于环保的标语
2014/06/13 职场文书
会计学毕业生求职信
2014/06/25 职场文书
美术教师求职信范文
2015/03/20 职场文书
大学开学典礼新闻稿
2015/07/17 职场文书
汶川大地震感悟
2015/08/10 职场文书
诚信教育主题班会
2015/08/13 职场文书
宝宝满月宴答谢词
2015/09/30 职场文书
使用pandas或numpy处理数据中的空值(np.isnan()/pd.isnull())
2021/05/14 Python
Redis 配置文件重要属性的具体使用
2021/05/20 Redis
使用Nginx搭载rtmp直播服务器的方法
2021/10/16 Servers