遮罩层 + 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 相关文章推荐
分享8款纯CSS3实现的搜索框功能
Sep 14 HTML / CSS
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
Jun 06 HTML / CSS
纯CSS3大转盘抽奖示例代码(响应式、可配置)
Jan 13 HTML / CSS
CSS3 实现穿梭星空动画
Nov 13 HTML / CSS
在HTML5 canvas里用卷积核进行图像处理的方法
May 02 HTML / CSS
input元素的url类型和email类型简介
Jul 11 HTML / CSS
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
Nov 22 HTML / CSS
html5 worker 实例(一) 为什么测试不到效果
Jun 24 HTML / CSS
HTML 5.1来了 9月份正式发布 更新内容预览
Apr 26 HTML / CSS
HTML5 canvas基本绘图之图形组合
Jun 27 HTML / CSS
移动端Html5页面生成图片解决方案
Aug 07 HTML / CSS
HTML5 textarea高度自适应的两种方案
Apr 08 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中使用Oracle数据库(3)
2006/10/09 PHP
file_get_contents(&quot;php://input&quot;, &quot;r&quot;)实例介绍
2013/07/01 PHP
一个简单的PHP验证码实现代码
2014/05/10 PHP
php站内搜索关键词变亮的实现方法
2014/12/30 PHP
PHP中浮点数计算比较及取整不准确的解决方法
2015/01/09 PHP
PHP如何实现Unicode和Utf-8编码相互转换
2015/07/29 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
清华大学出版的事半功倍系列 javascript全部源代码
2007/05/04 Javascript
用CSS+JS实现的进度条效果效果
2007/06/05 Javascript
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
2010/04/01 Javascript
浅谈JavaScript正则表达式分组匹配
2015/04/10 Javascript
C#中使用迭代器处理等待任务
2015/07/13 Javascript
js实现创建删除html元素小结
2015/09/30 Javascript
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
2015/10/27 Javascript
浅析Nodejs npm常用命令
2016/06/14 NodeJs
JavaScript数组操作函数汇总
2016/08/05 Javascript
详解获取jq ul第一个li定位的四种解决方案
2016/11/23 Javascript
nodejs爬虫遇到的乱码问题汇总
2017/04/07 NodeJs
vue中实现移动端的scroll滚动方法
2018/03/03 Javascript
vue实现文件上传功能
2018/08/13 Javascript
在vue中安装使用vux的教程详解
2018/09/16 Javascript
Angular实现svg和png图片下载实现
2019/05/05 Javascript
移动端吸顶fixbar的解决方案详解
2019/07/17 Javascript
[00:57]深扒TI7聊天轮盘语音出处5
2017/05/11 DOTA
python使用post提交数据到远程url的方法
2015/04/29 Python
在Django中同时使用多个配置文件的方法
2015/07/22 Python
Python调用C语言的实现
2019/07/26 Python
python识别验证码图片实例详解
2020/02/17 Python
Python实例方法、类方法、静态方法区别详解
2020/09/05 Python
C#如何进行LDAP用户校验
2012/11/21 面试题
C#软件工程师英语面试题
2015/06/07 面试题
社区工作者思想汇报
2014/01/13 职场文书
《夏夜多美》教学反思
2014/02/17 职场文书
开业典礼主持词
2014/03/21 职场文书
食品采购员岗位职责
2014/04/14 职场文书
Python实现打乒乓小游戏
2021/09/25 Python