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

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. Android程序中--不能改变的事情

    有时,开发人员会对应用程序进行更改,当安装为以前版本的更新时出现令人惊讶的结果 - 快捷方式断开,小部件消失或甚至根本无法安装. 应用程序的某些部分在发布后是不可变的,您可以通过理解它们来避免意外. ...

  2. 在Linux(Luna)下向Launch启动器中添加图标

    记录下在Luna下向Launch中添加图标的步骤,以供以后参考,这里我以加入eclipse图标为例: 首先,我们来创建一个desktop文件(Luna中到启动器Launch可以看作是Ubuntu中到桌 ...

  3. ucos实时操作系统学习笔记——内核结构和任务创建

    对于ucos实时操作系统,邵贝贝的那本书已经写得很详细了,我因为之前不深的研究过ucos,所以在这里做一个笔记,写一些个人对该操作系统的理解,仅仅是个人理解,如果有人看到这边随笔有不对的地方,望给我指 ...

  4. MongoDB Java Driver操作指南

    MongoDB为Java提供了非常丰富的API操作,相比关系型数据库,这种NoSQL本身的数据也有点面向对象的意思,所以对于Java来说,Mongo的数据结构更加友好. MongoDB在今年做了一次重 ...

  5. Html5 快速排序演示

    快速排序(Quicksort)是对冒泡排序的一种改进.快速排序由C. A. R. Hoare在1962年提出. 它的基本思想是:通过一趟排序将要排序的数据分割成独立的两部分,其中一部分的所有数据都比另 ...

  6. Spark 运行架构核心总结

    摘要: 1.基本术语 2.运行架构 2.1基本架构 2.2运行流程  2.3相关的UML类图  2.4调度模块: 2.4.1作业调度简介 2.4.2任务调度简介 3.运行模式 3.1 standalo ...

  7. Android开发学习之路-3DTouch效果模仿

    3D Touch是什么效果的大家应该都知道了.什么?不知道,那也没办法呀,我也没有iPhone 6s演示给你看的. 本篇博客要做的效果图: 来个低质量动图: 这个动图效果不是很好,实际上模糊效果应该是 ...

  8. 同步与异步 & 阻塞与非阻塞

    在进行网络编程时,我们常常见到同步(Sync)/异步(Async),阻塞(Block)/非阻塞(Unblock)四种调用方式: 一.同步 所谓同步,就是在发出一个功能调用时,在没有得到结果之前,该调用 ...

  9. Python遇到字符编码出问题的一个相对万能的办法

    在使用Python做爬虫的过程中,经常遇到字符编码出问题的情况. UnicodeEncodeError: 'ascii' codec can't encode character u'\u6211' ...

  10. 返回顶部的功能 div固定在页面位置不变

    1.你在网上搜索的时候,可能会搜索到div固定在页面上,不随滚动条滚动而滚动是用CSS写的,写法是position:fixed;bottom:0; 但是这个在iframe满地跑的页面实际开发中,有啥用 ...