一款优秀的Web 端iframe插件
为了能及时的将自己踩到的前端坑(包括ionic,angular,react,ReactNative,小程序,APICloud)分享给大家,以后会逐渐将文章转移到微信公众号:前端e家(front_e_family)。可直接扫码关注,公众号会不定期更新新文章,分享踩坑笔记!期待您的关注!
写在前面:
元旦将至,提前祝大家元旦快乐!近期在工作之余,在看vue框架的文档。上周和之前的同事闲聊了一些关于工作上的事情,比如:你们公司的前端用的都是什么框架?这个框架好不好用?有没有遇到什么大的坑?、、、经过一番交流,他们公司基本都在用vue这个框架,据他们说使用vue写OA系统简直太舒服了,开发起来便捷很多,,,。其实在上半年我就一直想深入学习一下vue,自己在同事那里也弄了一系列的视屏教程,看了好些,由于我们公司前端技术栈尚未使用该框架,如果长时间不用,东西很快就忘记了,所以现在在不忙的时候还在看文档,初步感觉vue就是高级版的小程序,比react简单好些,里面很多东西跟angularjs2+很像,比如他的指令系统(之前一直用angular2,react做项目),毕竟vue官网上也是说借鉴了一些angular的思想。如果大家对学习vue有什么好的内容,欢迎推荐!
效果预览:
简单介绍一下,页面上的效果是一个模态窗口,里面的内容是一个HTML页面,右上角有关闭iframe的窗口按钮,除该关闭按钮,其它都是html中的内容,例如下面的翻页器、、、。(开始也在网上搜索了一些关于JQ的iframe插件,但是都不是很满意,直到遇到它),下面教大家如何使用这个插件,和闭坑!(文章结尾处会提供下载链接)
第一步——引入JQuery
库:
首先说明一下,该插件依赖于JQuery
,所以在使用前请先自行引入JQuery
,否则将无法使用。
第二步——引入iframeTools
和相关样式:
css,js
文件的引入这里默认大家都会了,不再多说。(文章底部提供下载链接)
第三步——在需要使用的地方打开:
TINY.box.show({
iframe:'information.html',
boxid:'frameless',
width:1000,
height:630,
animate:false,
close:false
})
上面是打开方式。
参数说明:
iframe
是将被嵌入iframe
中的HTML
的地址,可以是远程地址,boxid
是给当前打开的iframe
的窗口设置的id
(最好不要相同,这样关闭iframe
时不会出现问题),width
是iframe
的窗口的宽度,height
是他的高度,animate
是否开启打开动画l;close
是否显示右上角的关闭按钮;
当然该插件远不止这些可配置属性,下面是全部可配置属性,大家有兴趣的可以自行尝试一下:
{ opacity:70,
close:1,
animate:1,
fixed:1,
mask:1,
maskid:'',
boxid:'',
topsplit:2,
url:0,
post:0,
height:0,
width:0,
html:0,
iframe:0
}
注意事项:
在子页面跳转的时候,请不要尝试多次打开iframe
,这样会出问题;如如:
点击上面的列表进入详情页面,详情页面也是和这个一样的窗口,
此时切记千万不要再打开一个iframe
:
当你在详情页面点击返回上层 列表时,确实返回了,此时的详情iframe使用到的资源并未彻底被浏览器释放,如果这样重复多次打开的话,会非常消耗资源;
如果在详情页面显示又上角的关闭按钮的话,你会发现多次打开后返回按钮可能错位(多个关闭按钮);
为了解决上面这两个问题,你可以在渲染列表的时候,给a
标签上赋值对应详情页面的HTML
地址即可;(只要在已经打开iframe
时不重复打开就没问题)