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

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. Linux硬件IO的优化简介

    Linux硬件IO的优化简介 首先简单介绍下有哪些硬件设备如下(由于硬件种类厂家等各种因素我就不在此多做介绍有兴趣的可以自行学习): 1.CPU:中央处理器,是计算机运算控制的核心部件之一,相当于人的 ...

  2. 使用HEXO快速建站

    先安好npm,请参照:http://max.cszi.com/archives/482 打开网站:https://hexo.io/   npm install hexo-cli -g hexo ini ...

  3. MyBatis3.2从入门到精通第一章

    第一章一.引言mybatis是一个持久层框架,是apache下的顶级项目.mybatis托管到goolecode下,再后来托管到github下.(百度百科有解释)二.概述mybatis让程序将主要精力 ...

  4. 练习JavaScript判断上传文件后缀名

    <script type = text/javascript> function jiance(filename) { var pic = ["jpg","p ...

  5. Jquery对网页高度、宽度的操作

    Jquery获取网页的宽度.高度 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: doc ...

  6. 说说DOM的那些事儿

    引子 先来一颗栗子: <img src="/sub/123.jpg" alt="test" /> <script type="tex ...

  7. ASP.NET MVC 描述类型(一)

    ASP.NET MVC 描述类型(一) 前言 在前面的好多篇幅中都有提到过ControllerDescriptor类型,并且在ASP.NET MVC 过滤器(一)篇幅中简单的描述过,今天我们就来讲一下 ...

  8. [译]ZOOKEEPER RECIPES-Queues

    队列 分布式队列是一种常见的数据结构.为了在ZooKepeer中实现分布式队列,第一步是要使用一个znode代表队列本身.分布式客户端通过create()方法将内容放入一个名叫"queue- ...

  9. iOS中数据库应用基础

    iOS 数据库入门 一.数据库简介 1.什么是数据库? 数据库(Database) 是按照数据结构来组织,存储和管理数据的仓库 数据库可以分为2大种类 关系型数据库(主流) PC端 Oracle My ...

  10. Linux Hadoop2.7.3 安装(单机模式) 一

    Linux Hadoop2.7.3 安装(单机模式) 一 Linux Hadoop2.7.3 安装(单机模式) 二 java环境安装 http://www.cnblogs.com/zeze/p/590 ...