jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码


Posted in Javascript onDecember 27, 2016

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下载所有版本(实时更新)

以上所述是小编给大家介绍的jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
经验几则 推荐
Sep 05 Javascript
JS input 数字验证代码
Jul 30 Javascript
一个挺有意思的Javascript小问题说明
Sep 26 Javascript
js屏蔽鼠标键盘(右键/Ctrl+N/Shift+F10/F11/F5刷新/退格键)
Jan 24 Javascript
DOM基础教程之模型中的模型节点
Jan 19 Javascript
jQuery检测返回值的数据类型
Jul 13 Javascript
谈谈jQuery Ajax用法详解
Nov 27 Javascript
JS实现的加减乘除四则运算计算器示例
Aug 09 Javascript
js实现图片粘贴上传到服务器并展示的实例
Nov 08 Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
Mar 06 Javascript
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
js+canvas实现纸牌游戏
Mar 16 Javascript
TypeScript学习之强制类型的转换
Dec 27 #Javascript
如何利用JQuery实现从底部回到顶部的功能
Dec 27 #Javascript
详解js的六大数据类型
Dec 27 #Javascript
javascript ASCII和Hex互转的实现方法
Dec 27 #Javascript
谈谈第三方App接入微信登录 解读
Dec 27 #Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
Dec 27 #Javascript
修改ligerui 默认确认按钮的方法
Dec 27 #Javascript
You might like
一个分页的论坛
2006/10/09 PHP
一道关于php变量引用的面试题
2010/08/08 PHP
基于PHP导出Excel的小经验 完美解决乱码问题
2013/06/10 PHP
基于PHP实现用户注册登录功能
2016/10/14 PHP
基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
2006/12/06 Javascript
jQuery中append()方法用法实例
2014/12/25 Javascript
jquery背景跟随鼠标滑动导航
2015/11/20 Javascript
JavaScript正则表达式匹配 div  style标签
2016/03/15 Javascript
AngularJS基础 ng-srcset 指令简单示例
2016/08/03 Javascript
关于JavaScript数组你所不知道的3件事
2016/08/24 Javascript
详解js中==与===的区别
2017/01/08 Javascript
vue.js中指令Directives详解
2017/03/20 Javascript
BootStrap selectpicker后台动态绑定数据
2017/06/01 Javascript
用js屏蔽被http劫持的浮动广告实现方法
2017/08/10 Javascript
详解node child_process模块学习笔记
2018/01/24 Javascript
js实现购物车功能
2018/06/12 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
2019/11/19 Javascript
jQuery实现雪花飘落效果
2020/08/02 jQuery
[01:27]DOTA2电竞之夜 今夜共饮庆功酒
2014/08/02 DOTA
[56:00]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第二场
2018/04/10 DOTA
[43:57]LGD vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python网页解析利器BeautifulSoup安装使用介绍
2015/03/17 Python
在Python的Flask中使用WTForms表单框架的基础教程
2016/06/07 Python
Python获取文件所在目录和文件名的方法
2017/01/12 Python
Python实现随机创建电话号码的方法示例
2018/12/07 Python
python同步两个文件夹下的内容
2019/08/29 Python
CSS3轻松实现圆角效果
2017/11/09 HTML / CSS
CSS3 :default伪类选择器使用简介
2018/03/15 HTML / CSS
电脑租赁公司创业计划书
2014/01/08 职场文书
春节联欢晚会主持词范文
2014/03/24 职场文书
团队经理竞聘书
2014/03/31 职场文书
环保专项行动方案
2014/05/12 职场文书
应届毕业生自荐书
2014/06/18 职场文书
巾帼标兵事迹材料
2014/12/26 职场文书
幼儿园个人总结
2015/02/28 职场文书
CSS实现切角+边框+投影+内容背景色渐变效果
2021/11/01 HTML / CSS