实现：弹出iframe内嵌页面元素全屏化

一直也没分享有用的东西给大家，今天刚好做一个例子，整理了一下，顺便发给大家。希望多大家有帮助。

弹出iframe内嵌页面元素到父页面并全屏化

iframe和弹窗这些词对于js高手来说都是耳熟能详的东西,作为一个新人来说,还在学习阶段的我就在工作中遇到这么一个奇葩的需求,要在引入的iframe页面里做一个全屏化的功能.

粗略一看,这还不容易,模拟下F11的功能键什么的,于是网上一搜还真有一大堆关于全屏化的案例,遂借来用之.

然后高高兴兴的拿一个没有iframe引入的页面做了个测试页面查看全屏化功能效果,代码如下(fullScreenPage.html):

 1 
 2 
 3 
 4     
 5     
 6 
 7 
 8     

 9         
10         
11     
12     

13         

14             
15         
16     
17 
18 
19 
50 

还做了浏览器兼容(FireFox=mozRequestFullScreen;W3C=requestFullscreen;Chrome等=webkitRequestFullScreen;ie11=msRequestFullscreen).....于是,我立马放到项目里,结果是什么样子呢?执行下面的代码(parentPage.html)就知道了

 
 2 
 3 
 4     
 5     
 6 
 7 
 8     

 9         
10         
11     
12 
13 

jQuery还请自行下载并导入引用,我这里就不细说了.分享一个jQuery下载地址