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 相关文章推荐
?牟┛途W扣了一??效果出?? target=
May 27 Javascript
异步javascript的原理和实现技巧介绍
Nov 08 Javascript
JS设置获取cookies的方法
Jan 26 Javascript
js选择并转移导航菜单示例代码
Aug 19 Javascript
原生JS实现旋转木马式图片轮播插件
Apr 25 Javascript
jquery自定义表单验证插件
Oct 12 Javascript
angular2倒计时组件使用详解
Jan 12 Javascript
微信小程序 封装http请求实例详解
Jan 16 Javascript
vue地区选择组件教程详解
May 04 Javascript
JavaScript使用math.js进行精确计算操作示例
Jun 19 Javascript
谈谈node.js中的模块系统
Sep 01 Javascript
Vue实现图书管理案例
Jan 20 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与SQL注入攻击[三]
2007/04/17 PHP
PHP开发工具ZendStudio下Xdebug工具使用说明详解
2013/11/11 PHP
一组PHP加密解密函数分享
2014/06/05 PHP
Yii视图CGridView列表用法实例分析
2016/07/12 PHP
PHP查看SSL证书信息的方法
2016/09/22 PHP
php格式文件打开的四种方法
2018/02/24 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
摘自启点的main.js
2008/04/20 Javascript
SWFObject Flash js调用类
2008/07/08 Javascript
input 和 textarea 输入框最大文字限制的jquery插件
2011/10/27 Javascript
javascript移动设备Web开发中对touch事件的封装实例
2014/06/05 Javascript
jQuery实现的淡入淡出二级菜单效果代码
2015/09/15 Javascript
关于JS中二维数组的声明方法
2016/09/24 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
2016/12/23 Javascript
jquery实现tab键进行选择后enter键触发click行为
2017/03/29 jQuery
JavaScript中判断为整数的多种方式及保留两位小数的方法
2019/09/09 Javascript
python实现单线程多任务非阻塞TCP服务端
2017/06/13 Python
python验证身份证信息实例代码
2019/05/06 Python
Python 读取串口数据,动态绘图的示例
2019/07/02 Python
Django 导出项目依赖库到 requirements.txt过程解析
2019/08/23 Python
Python切图九宫格的实现方法
2019/10/10 Python
PyTorch加载预训练模型实例(pretrained)
2020/01/17 Python
Python使用Numpy模块读取文件并绘制图片
2020/05/13 Python
如何快速一次性卸载所有python包(第三方库)呢
2020/10/20 Python
CSS3轻松实现清新 Loading 效果的简单实例
2016/06/06 HTML / CSS
Betsey Johnson官网:妖娆可爱的连衣裙及鞋子、手袋和配件
2016/12/30 全球购物
世界领先的26岁以下学生和青少年旅行预订网站:StudentUniverse
2018/07/01 全球购物
土耳其新趋势女装购物网站:Addax
2020/01/07 全球购物
工业设计专业推荐信
2013/10/29 职场文书
蛋糕店的商业计划书范文
2014/01/27 职场文书
员工试用期考核自我鉴定
2014/04/13 职场文书
推广普通话演讲稿
2014/05/23 职场文书
教务处教学工作总结
2015/08/10 职场文书
高考百日冲刺决心书
2015/09/23 职场文书
根德5570型九灯四波段立体声收音机是电子管收音机的楷模 ? 再论5570
2022/04/05 无线电
Selenium浏览器自动化如何上传文件
2022/04/06 Python