遮罩层 + 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实现背景模糊的三种方式(小结)
May 15 HTML / CSS
CSS3实现苹果手机解锁的字体闪亮效果示例
Jan 05 HTML / CSS
H5 canvas中width、height和style的宽高区别详解
Nov 02 HTML / CSS
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
Jan 09 HTML / CSS
深入剖析HTML5 内联框架iFrame
May 04 HTML / CSS
h5调用摄像头的实现方法
Jun 01 HTML / CSS
HTML5+CSS3模仿优酷视频截图功能示例
Jan 05 HTML / CSS
html5使用Drag事件编辑器拖拽上传图片的示例代码
Aug 22 HTML / CSS
SVG实现多彩圆环倒计时效果的示例代码
Nov 21 HTML / CSS
canvas如何绘制钟表的方法
Dec 13 HTML / CSS
详解HTML5 data-* 自定义属性
Jan 24 HTML / CSS
钉钉企业内部H5微应用开发详解
May 12 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面向对象全攻略 (七) 继承性
2009/09/30 PHP
jQuery中的RadioButton,input,CheckBox取值赋值实现代码
2014/02/18 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
php+redis实现商城秒杀功能
2020/11/19 PHP
漂亮的widgets,支持换肤和后期开发新皮肤
2007/04/23 Javascript
jQuery ui1.7 dialog只能弹出一次问题
2009/08/27 Javascript
js禁止小键盘输入数字功能代码
2011/08/01 Javascript
asp.net刷新本页面的六种方法总结
2014/01/07 Javascript
原生js实现淘宝首页点击按钮缓慢回到顶部效果
2014/04/06 Javascript
iframe里面的元素触发父窗口元素事件的jquery代码
2014/10/19 Javascript
jQuery插件MixItUp实现动画过滤和排序
2015/04/12 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
2015/07/27 Javascript
深入浅析javascript立即执行函数
2015/10/23 Javascript
JS实现的3D拖拽翻页效果代码
2015/10/31 Javascript
js多个物体运动功能实例分析
2016/12/20 Javascript
Vue.js 实现数据展示全部和收起功能
2018/09/05 Javascript
原生JS实现弹幕效果的简单操作指南
2020/11/10 Javascript
python opencv判断图像是否为空的实例
2019/01/26 Python
python如何解析配置文件并应用到项目中
2019/06/27 Python
Django项目uwsgi+Nginx保姆级部署教程实现
2020/04/19 Python
在keras中对单一输入图像进行预测并返回预测结果操作
2020/07/09 Python
python基于pygame实现飞机大作战小游戏
2020/11/19 Python
matplotlib部件之矩形选区(RectangleSelector)的实现
2021/02/01 Python
Python tkinter实现日期选择器
2021/02/22 Python
英国、欧洲和全球租车服务:Avis英国
2016/08/29 全球购物
意大利网上购书网站:Libraccio.it
2021/02/03 全球购物
EJB实例的生命周期
2016/10/28 面试题
春节活动策划方案
2014/01/24 职场文书
试用期转正鉴定评语
2014/01/27 职场文书
应届毕业生应聘自荐信范文
2014/02/26 职场文书
2014学雷锋活动总结
2014/03/09 职场文书
雷人标语集锦
2014/06/19 职场文书
2015年乡镇人大工作总结
2015/04/22 职场文书
2015年教师教学工作总结
2015/04/28 职场文书
社区敬老月活动总结
2015/05/07 职场文书
看完这篇文章获得一些java if优化技巧
2021/07/15 Java/Android