(注册博客好久了,一直没舍得添砖加瓦,主要是每次想写点东西的时候,随便搜一搜发现都比我总结的都要好,甚感尴尬,但是总是要开始的,所以这就是我的第一篇博客,也绝不会是最后一篇,废话不多说,直接入正题)

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

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

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

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title>Control Tower</title>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 </head>

 <body style="margin: 0px;height: 100%;width: 100%;">

     <div id="buttonPanel" style="position: absolute;left: 25%;z-index:100">

         <input id="full_screen_open" type="button" value="打开全屏">

         <input id="full_screen_close" type="button" value="退出全屏" style="display: none">

     </div>

     <div id="container" style="display:table;height: 50%;width: 50%;background-color: #004981;position:absolute;left: 25%;">

         <div style="display:table-cell;height: 50%;width: 50%;text-align: center;vertical-align: middle;border: 2px solid #DDDDDD;">

             <font id="font" size="30"></font>

         </div>

     </div>

 </body>

 <script src="./scripts/jquery/jquery-1.11.3.js" type="text/javascript"></script>

 <script type="text/javascript">

 $("#full_screen_open").on("click",function(){

     requestFullScreen($("#container")['0']);

     $("#font").empty();

     $("#font").text("已打开全屏化");

 });

 var requestFullScreen = function(element) {

     var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;

     if (requestMethod) {

         requestMethod.call(element);

     } else if (typeof window.ActiveXObject !== "undefined") {

         var wscript = new ActiveXObject("WScript.Shell");

         if (wscript !== null) {

             wscript.SendKeys("{F11}");

         }

     }

 }

 </script>

 </html>

嗯,我自己觉得这个效果真的是不要太棒了,还做了浏览器兼容(FireFox=mozRequestFullScreen;W3C=requestFullscreen;Chrome等=webkitRequestFullScreen;ie11=msRequestFullscreen).....

于是,我立马放到项目里,结果是什么样子呢?执行下面的代码(parentPage.html)就知道了....

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title>Control Tower</title>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 </head>

 <body style="margin: 0px;height: 100%;width: 100%;">

     <div id="parentContainer" style="height: 75%;width: 75%;position:absolute;left: 12.5%;border: 2px solid red;">

         <!-- 蓝色边框以内的内容是引入的iframe页面内容,也是需要做全屏化功能的页面 -->

         <iframe src="fullScreenPage.html" style="border: 2px solid blue;height: 100%;width: 100%;"></iframe>

     </div>

 </body>

 </html>

哦豁,好像没生效,那么为什么呢?

很明显没有起作用,那么怎么办呢?既然引入的子页面iframe不生效,是不是从父页面或许就可以了?

那就赶紧试试找到父类并执行全屏功能,把页面(fullScreenPage.html)改一改,代码如下：

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title>Control Tower</title>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 </head>

 <body style="margin: 0px;height: 100%;width: 100%;">

     <div id="buttonPanel" style="position: absolute;left: 25%;z-index:100">

         <input id="full_screen_open" type="button" value="打开全屏">

         <input id="full_screen_close" type="button" value="退出全屏" style="display: none">

     </div>

     <div id="container" style="display:table;height: 50%;width: 50%;background-color: #004981;position:absolute;left: 25%;">

         <div style="display:table-cell;height: 50%;width: 50%;text-align: center;vertical-align: middle;border: 2px solid #DDDDDD;">

             <font id="font" size="30"></font>

         </div>

     </div>

 </body>

 <script src="./scripts/jquery/jquery-1.11.3.js" type="text/javascript"></script>

 <script type="text/javascript">

 $("#full_screen_open").on("click",function(){

     /* 获取父类的document */

     var parentDoc = parent.document;

     /* 定义一个接收元素的变量 */

     var thisIframe = null;

     /* 用jQuery遍历父类的所有iframe,找到我引入的那个iframe,

           假设我不知道是哪个页面要引入我的iframe,但是引入我的iframe的src肯定会有引入这个页面的名字,

           所以通过这个去检索,一定能找到引入这个页面的iframe,然后把这个iframe的元素全屏化也就是把原来的页面全屏化 */

     $("iframe",window.parent.document).each(function(index,e){

         if (e.src.indexOf("fullScreenPage.html") > 0) {

             thisIframe = e;

             return false;

         }

     });

     requestFullScreen(thisIframe);

     $("#font").empty();

     $("#font").text("已打开全屏化");

 });

 var requestFullScreen = function(element) {

     var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;

     if (requestMethod) {

         requestMethod.call(element);

     } else if (typeof window.ActiveXObject !== "undefined") {

         var wscript = new ActiveXObject("WScript.Shell");

         if (wscript !== null) {

             wscript.SendKeys("{F11}");

         }

     }

 }

 </script>

 </html>

哈哈,改了之后发现果然可以了,问题解决。

jQuery还请自行下载并导入引用,我这里就不细说了.

这里分享一个jQuery下载的地址：jquery下载所有版本(实时更新)

弹出iframe内嵌页面元素到父页面并全屏化的更多相关文章

  1. 弹出窗口内嵌iframe 框口自适应

    说一下,弹出窗口还有内嵌一个iframe 这种模式应该是不科学的,但是公司项目里面就偏偏用到了,它这高低还不能只适应,所以我痛苦的日子来了 分析一下: 首先window.showDialog 方法的时 ...

  2. Python3.x：selenium获取iframe内嵌页面的源码

    Python3.x:selenium获取iframe内嵌页面的源码 前言 在一些网页中经常会看到ifrmae/frame标签,iframe是嵌入式框架一般用来在已有的页面中嵌入另一个页面,当一个元素在 ...

  3. 如何根据iframe内嵌页面调整iframe高宽续篇

    接着昨天的工作 如何根据iframe内嵌页面调整iframe高宽 来说,按照文章中说的第二种方法实现代码如下: 实现 A.com/detail/view 页面的iframe代码如下: <ifra ...

  4. 关于selenium自动化对iframe内嵌元素的处理

    今天上班闲来无聊,于是来练练自动化,结果碰上了可恶的iframe,楼主,以前也遇到过,但是一直也没搞懂怎么处理的,都是抄别人的代码,今天决定独立解决试试.首先先来认识什么是iframe,它就长下图这样 ...

  5. MetaBase使用iframe内嵌到Vue页面样式优化

    Matebase是一个开源,易上手的BI工具,这里不做太多介绍了. 官网地址:https://www.metabase.com/ 解决问题描述: 使用iframe内嵌Metabase公开链接之后,页面 ...

  6. ios11，弹出层内的input框光标错位 键盘弹出时，输入信息，光标一直乱跳

      之前开发了一个微信项目,维护期中苹果手机突然出现光标错位现象,经过排查,发现是最新的ios11系统的锅. 具体情况:弹出层使用position: fixed:弹出层内附带input/textare ...

  7. 笔记：javascript操作iframe内的DOM元素，及调用iframe内的方法

    iframe相当于一个嵌入在网页内的浏览器,它与当前网页是隔离的. 但有时我们也需要在当前网页操作iframe内的元素或操作iframe内的javascript方法. 在网页内操作DOM元素,是使用d ...

  8. HTML+CSS教程（二）frameset框架和iframe内嵌

    一.框架 (frameset)1.用<frameset></frameset>代替了<body></body>2.rows设置行的占页面的百分比:col ...

  9. PHP弹出提示框并跳转到新页面即重定向到新页面

    本文为大家介绍下使用PHP弹出提示框并跳转到新页面,也就是大家所认为的重定向,下面的示例大家可以参考下   这两天写一个demo,需要用到提示并跳转,主要页面要求不高,觉得没必要使用AJAX,JS等, ...

随机推荐

  1. 使用Hudson搭建自动构建服务器

    环境: ubuntu1404_x64 说明: 使用hudson和git搭建自动构建服务器的简单示例 安装hudson及相关插件 安装hudson 安装命令如下: sudo sh -c "ec ...

  2. MySQL 优化之 ICP (index condition pushdown:索引条件下推)

    ICP技术是在MySQL5.6中引入的一种索引优化技术.它能减少在使用 二级索引 过滤where条件时的回表次数 和 减少MySQL server层和引擎层的交互次数.在索引组织表中,使用二级索引进行 ...

  3. OpenGL: 纹理采样 texture sample

    Sampler (GLSL) Sampler通常是在Fragment shader(片元着色器)内定义的,这是一个uniform类型的变量,即处理不同的片元时这个变量是一致不变的.一个sampler和 ...

  4. 使用“Cocos引擎”创建的cpp工程如何在VS中调试Cocos2d-x源码

    前段时间Cocos2d-x更新了一个Cocos引擎,这是一个集合源码,IDE,Studio这一家老小的整合包,我们可以使用这个Cocos引擎来创建我们的项目. 在Cocos2d-x被整合到Cocos引 ...

  5. 1、利用蓝牙定位及姿态识别实现一个智能篮球场套件（一）——用重写CC2541透传模块做成智能手环

    一.预言 要实现一个智能篮球场套件,需要设计一个佩戴在篮球运动员手臂上的可以检测投篮.记步的手环,以及一套可以根据RSSI定位运动员的蓝牙定位装置.下面是大致需要的步骤: 首先,需要用CC2541透传 ...

  6. ASP.NET MVC Model绑定(四)

    ASP.NET MVC Model绑定(四) 前言 前面的篇幅对于Model绑定器IModelBinder以及实现类型.Model绑定器提供程序都作了粗略的讲解,可以把Model绑定器想象成一个大的容 ...

  7. spring声明式事务管理总结

    事务配置 首先在/WEB-INF/applicationContext.xml添加以下内容: <!-- 配置事务管理器 --> <bean id="transactionM ...

  8. xcode低版本调试高版本真机系统

    低版本xcode调试本真机高版本系统 //打开此路径把最新的文件拷贝到这里就可以了 /Applications/Xcode.app/Contents/Developer/Platforms/iPhon ...

  9. 游戏服务器菜鸟之C#初探四游戏服务

    经过多次折腾之后,在一次进行了一次重大的重构,去解决问题 主要重构如下 1.将原来的单一协议修改多协议进行,一些查询.认证的功能都采用HTTP进行,避免全部采用TCP链接资源的消耗: 2.原来单一的部 ...

  10. H5+JS+CSS3 综合应用

    慕课网新教程H5+JS+CSS3 实现的七夕言情主题效果已经出炉了 从设计到实现到录制与编写用了快1个月的时间,说真的这个案例是慕课定制的,我之前也没有系统的做过这样的一个效果,在实现的时候自己也重新 ...