为了能及时的将自己踩到的前端坑（包括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时不重复打开就没问题）

插件下载地址：

https://download.csdn.net/download/li11_/10889859