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

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. 关于Genymotion下载比较慢的解决办法

    Genymotion号称Android模拟器中运行最快的,但是服务器在国外,Android镜像下载起来那个速度就不想说了. Add new device后下载速度太慢了,容易失败 先登录,然后add, ...

  2. [AlwaysOn Availability Groups] 健康模型 Part 2 ——扩展

    健康模型扩展 第一部分已经介绍了AlwayOn健康模型的概述.现在是创建一个自己的PBM策略,然后设置为制定的归类.创建这些策略,创建之后修改一下配置,dashboard就会自动评估这些策略. 场景, ...

  3. Linux程序包管理之rpm

    rpm简介 rpm( Red Hat Package Manager )是一个开放的软件包管理系统.它工作于Red Hat Linux及其他Linux系统,成为Linux中公认的软件包管理标准. rp ...

  4. SVG:linearGradient渐变在直线上失效的问题解决方案

    SVG开发里有个较为少见的问题. 对x1=x2或者y1=y2的直线(line以及path),比如: <path d="M200,10 200,100" stroke=&quo ...

  5. Maven实战：pom.xml与settings.xml

    pom.xml与settings.xml pom.xml与setting.xml,可以说是Maven中最重要的两个配置文件,决定了Maven的核心功能,虽然之前的文章零零碎碎有提到过pom.xml和s ...

  6. ASP.NET Web API Model-ModelBinder

    ASP.NET Web API Model-ModelBinder 前言 本篇中会为大家介绍在ASP.NET Web API中ModelBinder的绑定原理以及涉及到的一些对象模型,还有简单的Mod ...

  7. YY一下十年后的自己

    ps:其实这篇文章的评论比文章本身更有意思,欢迎关注. 每到年底总是我最焦虑的时候,年龄越大情况越明显. 可能越长大越是对 时光的流逝 更有感触,有感触之后就会胡思乱想.所以随手开始写下这篇文章. 人 ...

  8. 在ASP.NET MVC5中实现具有服务器端过滤、排序和分页的GridView

    背景 在前一篇文章<[初学者指南]在ASP.NET MVC 5中创建GridView>中,我们学习了如何在 ASP.NET MVC 中实现 GridView,类似于 ASP.NET web ...

  9. eclipse下查看maven下载的源码中文乱码问题

    在项目中设置通过maven下载源代码和javadoc,直接通过eclipse浏览源代码时,发现中文为乱码.解决方法如下: 修改Eclipse中文本文件的默认编码:windows->Prefere ...

  10. Html5 希尔排序演示

    希尔排序(Shell Sort)是插入排序的一种.也称缩小增量排序,是直接插入排序算法的一种更高效的改进版本. 如下图所示: 代码如下: <!DOCTYPE html> <html& ...