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 相关文章推荐
javascript字典探测用户名工具
Oct 05 Javascript
用正则表达式 动态创建/增加css style script 兼容IE firefox
Mar 10 Javascript
缓动函数requestAnimationFrame 更好的实现浏览器经动画
Dec 07 Javascript
js算法中的排序、数组去重详细概述
Oct 14 Javascript
一个Action如何调用两个不同的方法
May 22 Javascript
JS根据生日算年龄的方法
May 05 Javascript
JS中动态创建元素的三种方法总结(推荐)
Oct 20 Javascript
JS鼠标3次点击事件实现代码及扩展思路
Sep 12 Javascript
vue-music关于Player播放器组件详解
Nov 28 Javascript
javascript 通过键名获取键盘的keyCode方法
Dec 31 Javascript
详解Vue中的scoped及穿透方法
Apr 18 Javascript
Vue中的nextTick作用和几个简单的使用场景
Jan 25 Vue.js
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
PHP 高级课程笔记 面向对象
2009/06/21 PHP
php使用array_rand()函数从数组中随机选择一个或多个元素
2014/04/28 PHP
thinkphp连贯操作实例分析
2014/11/22 PHP
使用PHPExcel操作Excel用法实例分析
2015/03/26 PHP
php实现购物车功能(下)
2016/01/05 PHP
javascript 函数速查表
2010/02/07 Javascript
基于jquery的分页控件(C#)
2011/01/06 Javascript
简易js代码实现计算器操作
2013/04/15 Javascript
Jquery实现的一种常用高亮效果示例代码
2014/01/28 Javascript
js实现div弹出层的方法
2014/11/20 Javascript
Javascript函数式编程简单介绍
2015/10/11 Javascript
jQuery链式操作实例分析
2015/11/16 Javascript
javascript 小数乘法结果错误的处理方法
2016/07/28 Javascript
Windows系统下安装Node.js的步骤图文详解
2016/11/15 Javascript
Vue 过渡(动画)transition组件案例详解
2017/01/22 Javascript
js图片放大镜效果实现方法详解
2020/10/28 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
2017/03/30 Javascript
微信小程序获取用户绑定手机号方法示例
2019/07/21 Javascript
简单了解JS打开url的方法
2020/02/21 Javascript
js 获取扫码枪输入数据的方法
2020/06/10 Javascript
python计算最大优先级队列实例
2013/12/18 Python
Django中的CACHE_BACKEND参数和站点级Cache设置
2015/07/23 Python
深入理解Python中的内置常量
2017/05/20 Python
python 每天如何定时启动爬虫任务(实现方法分享)
2018/05/21 Python
使用Python中的reduce()函数求积的实例
2019/06/28 Python
python实现递归查找某个路径下所有文件中的中文字符
2019/08/31 Python
python多进程间通信代码实例
2019/09/30 Python
使用python matploblib库绘制准确率,损失率折线图
2020/06/16 Python
Python文件名匹配与文件复制的实现
2020/12/11 Python
HTML5本地存储之Web Storage应用介绍
2013/01/06 HTML / CSS
吃透移动端 Html5 响应式布局
2019/12/16 HTML / CSS
教师实习的自我鉴定
2013/10/26 职场文书
创业计划书中包含的9个方面
2013/12/26 职场文书
元宵节晚会主持人串词
2014/03/25 职场文书
捐款倡议书
2014/04/14 职场文书
十大最强水系宝可梦,最美宝可梦排第三,榜首大家最熟悉
2022/03/18 日漫