遮罩层 + 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特性查询(Feature Query: @supports)功能简介
Jul 31 HTML / CSS
HTML5实现表单自动验证功能实例代码
Jan 11 HTML / CSS
基于HTML5 audio元素播放声音jQuery小插件
May 11 HTML / CSS
html标签之Object和EMBED标签详解
Jul 04 HTML / CSS
编写html5时调试发现脚本php等网页js、css等失效
Dec 31 HTML / CSS
Html5 语法与规则简要概述
Jul 29 HTML / CSS
HTML5各种头部meta标签的功能(推荐)
Mar 13 HTML / CSS
HTML5 新表单类型示例代码
Mar 20 HTML / CSS
Html5 Canvas动画基础碰撞检测的实现
Dec 06 HTML / CSS
深入了解canvas在移动端绘制模糊的问题解决
Apr 30 HTML / CSS
html5响应式开发自动计算fontSize的方法
Jan 13 HTML / CSS
前端H5 Video常见使用场景简介
Aug 21 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
2006/12/14 PHP
php session和cookie使用说明
2010/04/07 PHP
PHP删除HTMl标签的三种解决方法
2013/06/30 PHP
php中eval函数的危害与正确禁用方法
2014/06/30 PHP
PHP导出带样式的Excel示例代码
2016/08/28 PHP
ThinkPHP实现图片上传操作的方法详解
2017/05/08 PHP
PHP实现动态删除XML数据的方法示例
2018/03/30 PHP
jQuery实现点击标题输入详细信息
2013/04/16 Javascript
JQuery 图片的展开和伸缩实例讲解
2013/04/18 Javascript
JavaScript删除数组元素的方法
2015/03/20 Javascript
jquery操作angularjs对象
2015/06/26 Javascript
jQuery无刷新分页完整实例代码
2015/10/27 Javascript
javascript检查某个元素在数组中的索引值
2016/03/30 Javascript
jQuery实例—选项卡的简单实现(js源码和jQuery)
2016/06/14 Javascript
js 两个日期比较相差多少天的实例
2017/10/19 Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
2019/07/31 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
2019/08/01 Javascript
Python开发编码规范
2006/09/08 Python
Python中Threading用法详解
2017/12/27 Python
基于Django URL传参 FORM表单传数据 get post的用法实例
2018/05/28 Python
pyqt实现.ui文件批量转换为对应.py文件脚本
2019/06/19 Python
在Django model中设置多个字段联合唯一约束的实例
2019/07/17 Python
pytorch模型预测结果与ndarray互转方式
2020/01/15 Python
一款纯css3实现的颜色渐变按钮的代码教程
2014/11/12 HTML / CSS
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
html5 worker 实例(二) 图片变换效果
2013/06/24 HTML / CSS
详解HTML5中的元素与元素
2015/08/17 HTML / CSS
Perfume’s Club美国官网:西班牙第一家在线美容店
2020/06/10 全球购物
《画风》教学反思
2014/04/16 职场文书
读书月活动方案
2014/05/22 职场文书
生物科学专业自荐书
2014/06/20 职场文书
应届大专生求职信
2014/06/26 职场文书
组工干部对照检查材料
2014/08/25 职场文书
社区端午节活动总结
2015/02/11 职场文书
搬迁通知
2015/04/20 职场文书
幼儿园托班教育随笔
2015/08/14 职场文书