三沣开发知识 购物 网址 游戏 小说 歌词 地图 快照 股票 美女 新闻 笑话 | 汉字 软件 日历 阅读 下载 图书馆 开发 租车 短信 China
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
vbs/VBScript DOS/BAT hta htc python perl 游戏相关 VBA 远程脚本 ColdFusion ruby专题
autoit seraphzone PowerShell linux shell Lua Golang Erlang 其它教程 CSS/HTML/Xhtml
html5 CSS XML/XSLT Dreamweaver教程 经验交流 开发者乐园 Android开发资料
站长资讯 .NET新手 ASP.NET C# WinForm Silverlight WCF CLR WPF XNA VisualStudio ASP.NET-MVC .NET控件开发 EntityFramework WinRT-Metro Java C++ PHP Delphi Python Ruby C语言 Erlang Go Swift Scala R语言 Verilog 其它语言 架构设计 面向对象 设计模式 领域驱动 Html-Css JavaScript jQuery HTML5 SharePoint GIS技术 SAP OracleERP DynamicsCRM K2 BPM 信息安全 企业信息 Android开发 iOS开发 WindowsPhone WindowsMobile 其他手机 敏捷开发 项目管理 软件工程 SQLServer Oracle MySQL NoSQL 其它数据库 Windows7 WindowsServer Linux
  IT知识库 -> Html-Css -> 弹出iframe内嵌页面元素到父页面并全屏化 -> 正文阅读
 

[Html-Css]弹出iframe内嵌页面元素到父页面并全屏化

弹出iframe内嵌页面元素到父页面并全屏化 (注册博客好久了,一直没舍得添砖加瓦,主要是每次想写点东西的时候,随便搜一搜发现都比我总结的都要好,甚感尴尬,但是总是要开始的,所以这就是我的第一篇博客,也绝不会是最后一篇,废话不多说,直接入正题)
iframe和弹窗这些词对于js高手来说都是耳熟能详的东西,作为一个新人来说,还在学习阶段的我就在工作中遇到这么一个奇葩的需求,要在引入的iframe页面里做一个全屏化的功能.
粗略一看,这还不容易,模拟下F11的功能键什么的,于是网上一搜还真有一大堆关于全屏化的案例,遂借来用之.
然后高高兴兴的拿一个没有iframe引入的页面做了个测试页面查看全屏化功能效果,代码如下(fullScreenPage.html):

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title>Control Tower</title>
 5     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 6 </head>
 7 <body style="margin: 0px;height: 100%;width: 100%;">
 8     <div id="buttonPanel" style="position: absolute;left: 25%;z-index:100">
 9         <input id="full_screen_open" type="button" value="打开全屏">
10         <input id="full_screen_close" type="button" value="退出全屏" style="display: none">
11     </div>
12     <div id="container" style="display:table;height: 50%;width: 50%;background-color: #004981;position:absolute;left: 25%;">
13         <div style="display:table-cell;height: 50%;width: 50%;text-align: center;vertical-align: middle;border: 2px solid #DDDDDD;">
14             <font id="font" size="30"></font>
15         </div>
16     </div>
17 </body>
18 <script src="./scripts/jquery/jquery-1.11.3.js" type="text/javascript"></script>
19 <script type="text/javascript">
20 $("#full_screen_open").on("click",function(){
21     requestFullScreen($("#container")['0']);
22     $("#font").empty();
23     $("#font").text("已打开全屏化");
24 });
25 var requestFullScreen = function(element) {
26     var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
27     if (requestMethod) {
28         requestMethod.call(element);
29     } else if (typeof window.ActiveXObject !== "undefined") {
30         var wscript = new ActiveXObject("WScript.Shell");
31         if (wscript !== null) {
32             wscript.SendKeys("{F11}");
33         }
34     }
35 }
36 </script>
37 </html>

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

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title>Control Tower</title>
 5     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 6 </head>
 7 <body style="margin: 0px;height: 100%;width: 100%;">
 8     <div id="parentContainer" style="height: 75%;width: 75%;position:absolute;left: 12.5%;border: 2px solid red;">
 9         <!-- 蓝色边框以内的内容是引入的iframe页面内容,也是需要做全屏化功能的页面 -->
10         <iframe src="fullScreenPage.html" style="border: 2px solid blue;height: 100%;width: 100%;"></iframe>
11     </div>
12 </body>
13 </html>

哦豁,好像没生效,那么为什么呢?
很明显没有起作用,那么怎么办呢?既然引入的子页面iframe不生效,是不是从父页面或许就可以了?
那就赶紧试试找到父类并执行全屏功能,把页面(fullScreenPage.html)改一改,代码如下:

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title>Control Tower</title>
 5     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 6 </head>
 7 <body style="margin: 0px;height: 100%;width: 100%;">
 8     <div id="buttonPanel" style="position: absolute;left: 25%;z-index:100">
 9         <input id="full_screen_open" type="button" value="打开全屏">
10         <input id="full_screen_close" type="button" value="退出全屏" style="display: none">
11     </div>
12     <div id="container" style="display:table;height: 50%;width: 50%;background-color: #004981;position:absolute;left: 25%;">
13         <div style="display:table-cell;height: 50%;width: 50%;text-align: center;vertical-align: middle;border: 2px solid #DDDDDD;">
14             <font id="font" size="30"></font>
15         </div>
16     </div>
17 </body>
18 <script src="./scripts/jquery/jquery-1.11.3.js" type="text/javascript"></script>
19 <script type="text/javascript">
20 $("#full_screen_open").on("click",function(){
21     /* 获取父类的document */
22     var parentDoc = parent.document;
23     /* 定义一个接收元素的变量 */
24     var thisIframe = null;
25     /* 用jQuery遍历父类的所有iframe,找到我引入的那个iframe,
26           假设我不知道是哪个页面要引入我的iframe,但是引入我的iframe的src肯定会有引入这个页面的名字,
27           所以通过这个去检索,一定能找到引入这个页面的iframe,然后把这个iframe的元素全屏化也就是把原来的页面全屏化 */
28     $("iframe",window.parent.document).each(function(index,e){
29         if (e.src.indexOf("fullScreenPage.html") > 0) {
30             thisIframe = e;
31             return false;
32         }
33     });
34     requestFullScreen(thisIframe);
35     $("#font").empty();
36     $("#font").text("已打开全屏化");
37 });
38 var requestFullScreen = function(element) {
39     var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
40     if (requestMethod) {
41         requestMethod.call(element);
42     } else if (typeof window.ActiveXObject !== "undefined") {
43         var wscript = new ActiveXObject("WScript.Shell");
44         if (wscript !== null) {
45             wscript.SendKeys("{F11}");
46         }
47     }
48 }
49 </script>
50 </html>

哈哈,改了之后发现果然可以了,问题解决。
jQuery还请自行下载并导入引用,我这里就不细说了.
这里分享一个jQuery下载的地址:jquery下载所有版本(实时更新)
  Html-Css 最新文章
css3创建多边形clip属性,可用来绘制不规则
HTML小技巧的一些小技巧
提高网站可用性的十个实用小技巧
用css属性画出一棵圣诞树
input 属性radio中设置checked 不生效
学web前端开发写给新手的建议,超实用!
换算rem的宽度和高度不生效 chrome字体最小
button 按钮,结合onclick事件,验证和提交
漂亮的圆角文本框 CSS3实现
谈谈一些有趣的CSS题目(十六)
上一篇文章      下一篇文章      查看所有文章
加:2016-12-27 03:11:35  更:2017-05-16 06:35:59 
 
技术频道: 站长资讯 .NET新手区 ASP.NET C# WinForm Silverlight WCF CLR WPF XNA Visual Studio ASP.NET MVC .NET控件开发 Entity Framework WinRT/Metro Java C++ PHP Delphi Python Ruby C语言 Erlang Go Swift Scala R语言 Verilog 其它语言 架构设计 面向对象 设计模式 领域驱动设计 Html/Css JavaScript jQuery HTML5 SharePoint GIS技术 SAP Oracle ERP Dynamics CRM K2 BPM 信息安全 企业信息化其他 Android开发 iOS开发 Windows Phone Windows Mobile 其他手机开发 敏捷开发 项目与团队管理 软件工程其他 SQL Server Oracle MySQL NoSQL 其它数据库 Windows 7 Windows Server Linux
脚本语言: vbs/VBScript DOS/BAT hta htc python perl 游戏相关 VBA 远程脚本 ColdFusion ruby专题 autoit seraphzone PowerShell linux shell Lua Golang Erlang 其它教程
网站开发: CSS/HTML/Xhtml html5 CSS XML/XSLT Dreamweaver教程 经验交流 开发者乐园 Android开发资料
360图书馆 软件开发资料 文字转语音 购物精选 软件下载 美食菜谱 新闻资讯 电影视频 小游戏 Chinese Culture 股票 租车
生肖星座 三丰软件 视频 开发 短信 中国文化 网文精选 搜图网 美图 阅读网 多播 租车 短信 看图 日历 万年历 2017年10日历
2017-10-22 7:13:37
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT知识库