遮罩层 + 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中border-radius属性设定圆角的使用技巧
May 10 HTML / CSS
CSS3圆角和渐变2种常用功能详解
Jan 06 HTML / CSS
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
Dec 06 HTML / CSS
CSS3关于z-index不生效问题的解决
Feb 19 HTML / CSS
详解HTML5通讯录获取指定多个人的信息
Dec 20 HTML / CSS
HTML5 Canvas API中drawImage()方法的使用实例
Mar 25 HTML / CSS
详解Canvas事件绑定
Jun 27 HTML / CSS
利用canvas实现图片下载功能来实现浏览器兼容问题
May 31 HTML / CSS
HTML5 Canvas绘制圆点虚线实例
Jan 01 HTML / CSS
推荐10个HTML5响应式框架
Feb 25 HTML / CSS
利用三角函数在canvas上画虚线的方法
Jan 11 HTML / CSS
html粘性页脚的具体使用
Jan 18 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 shell超强免杀、减少体积工具实现代码
2012/10/16 PHP
PHP应用JSON技巧讲解
2013/02/03 PHP
php带抄送和密件抄送的邮件发送方法
2015/03/20 PHP
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
2007/01/09 Javascript
JavaScript高级程序设计 事件学习笔记
2011/09/10 Javascript
js自定义鼠标右键的实现原理及源码
2014/06/23 Javascript
JavaScript中的方法调用详细介绍
2014/12/30 Javascript
jQuery右侧选项卡焦点图片轮播特效代码分享
2015/09/05 Javascript
AngularJS 中文API参考手册
2016/07/28 Javascript
利用纯Vue.js构建Bootstrap组件
2016/11/03 Javascript
js实现固定宽高滑动轮播图效果
2017/01/13 Javascript
Javascript 链式作用域详细介绍
2017/02/23 Javascript
javascript 正则表达式分组、断言详解
2017/04/20 Javascript
JavaScript箭头(arrow)函数详解
2017/06/04 Javascript
微信小程序实现点击返回顶层的方法
2017/07/12 Javascript
vue router 跳转后回到顶部的实例
2018/08/31 Javascript
微信小程序分包加载代码实现方法详解
2019/09/23 Javascript
微信小程序swiper实现文字纵向轮播提示效果
2020/01/21 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
2020/11/11 Javascript
Python中time模块与datetime模块在使用中的不同之处
2015/11/24 Python
python脚本设置超时机制系统时间的方法
2016/02/21 Python
python中numpy包使用教程之数组和相关操作详解
2017/07/30 Python
Python内置模块ConfigParser实现配置读写功能的方法
2018/02/12 Python
pandas 条件搜索返回列表的方法
2018/10/30 Python
python3中类的继承以及self和super的区别详解
2019/06/26 Python
python实现字符串完美拆分split()的方法
2019/07/16 Python
python shell命令行中import多层目录下的模块操作
2020/03/09 Python
使用jupyter Nodebook查看函数或方法的参数以及使用情况
2020/04/14 Python
python Canny边缘检测算法的实现
2020/04/24 Python
python opencv pytesseract 验证码识别的实现
2020/08/28 Python
python 实现一个图形界面的汇率计算器
2020/11/09 Python
阿迪达斯西班牙官方网站:adidas西班牙
2016/07/21 全球购物
护士找工作求职信
2014/07/02 职场文书
化工见习报告范文
2014/10/31 职场文书
新郎婚礼答谢词
2015/01/04 职场文书
Vue过滤器(filter)实现及应用场景详解
2021/06/15 Vue.js