遮罩层 + 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垂直手风琴菜单
Jun 28 HTML / CSS
CSS3 伪类选择器 nth-child()说明
Jul 10 HTML / CSS
Css3圆角边框制作代码
Nov 18 HTML / CSS
CSS3 display知识详解
Nov 25 HTML / CSS
HTML5本地存储之Web Storage应用介绍
Jan 06 HTML / CSS
一款利用html5和css3动画排列人物头像的实例演示
Dec 05 HTML / CSS
举例详解HTML5中使用JSON格式提交表单
Jun 16 HTML / CSS
HTML5+WebSocket实现多文件同时上传的实例
Dec 29 HTML / CSS
LocalStorage记住用户和密码功能
Jul 24 HTML / CSS
html5通过postMessage进行跨域通信的方法
Dec 04 HTML / CSS
html5中使用hotcss.js实现手机端自适配的方法
Apr 23 HTML / CSS
HTML5拖拽文件上传的示例代码
Mar 04 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编程最快明白》第五讲:php目录、文件操作
2010/11/01 PHP
PHP 正则表达式之正则处理函数小结(preg_match,preg_match_all,preg_replace,preg_split)
2012/10/05 PHP
easyui的tabs update正确用法分享
2014/03/21 PHP
如何重写Laravel异常处理类详解
2020/12/20 PHP
javascript div 弹出可拖动窗口
2009/02/26 Javascript
js 异步处理进度条
2010/04/01 Javascript
jquery学习笔记二 实现可编辑的表格
2010/04/09 Javascript
jquery中输入验证中一个不错的效果
2010/08/21 Javascript
颜色选择器 Color Picker,IE,Firefox,Opera,Safar
2010/11/25 Javascript
有关JavaScript的10个怪癖和秘密分享
2011/08/28 Javascript
js控制CSS样式属性语法对照表
2012/12/11 Javascript
Ext JS添加子组件的误区探讨
2013/06/28 Javascript
非html5实现js版弹球游戏示例代码
2013/09/22 Javascript
Javascript中各种trim的实现详细解析
2013/12/10 Javascript
js获取url中&quot;?&quot;后面的字串方法
2014/05/15 Javascript
javascript快速排序算法详解
2014/09/17 Javascript
详解Vue.js——60分钟组件快速入门(上篇)
2016/12/05 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
2016/12/13 Javascript
React学习之事件绑定的几种方法对比
2017/09/24 Javascript
koa+mongoose实现简单增删改查接口的示例代码
2019/05/13 Javascript
封装一下vue中的axios示例代码详解
2020/02/16 Javascript
JavaScript中while循环的基础使用教程
2020/08/11 Javascript
vue-cli打包后本地运行dist文件中的index.html操作
2020/08/12 Javascript
python实现DES加密解密方法实例详解
2015/06/30 Python
pyhton列表转换为数组的实例
2018/04/04 Python
python使用wxpy实现微信消息防撤回脚本
2019/04/29 Python
pandas.DataFrame的pivot()和unstack()实现行转列
2019/07/06 Python
pandas DataFrame 警告(SettingWithCopyWarning)的解决
2019/07/23 Python
Python shutil模块用法实例分析
2019/10/02 Python
python DataFrame转dict字典过程详解
2019/12/26 Python
python 装饰器的使用示例
2020/10/10 Python
详解python第三方库的安装、PyInstaller库、random库
2021/03/03 Python
ABOUT YOU匈牙利:500个最受欢迎的时尚品牌
2019/07/19 全球购物
公务员的自我鉴定
2013/10/26 职场文书
个人自我评价和职业目标
2014/01/24 职场文书
党员干部形式主义个人整改措施
2014/09/17 职场文书