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 相关文章推荐
js jquery做的图片连续滚动代码
Jan 06 Javascript
超简单的jquery的AJAX用法
May 10 Javascript
各浏览器中querySelector和querySelectorAll的实现差异分析
May 23 Javascript
javascript实现实时输出当前的时间
Apr 27 Javascript
全面解析Bootstrap表单使用方法(表单控件)
Nov 24 Javascript
AngularJS实现按钮提示与点击变色效果
Sep 07 Javascript
vue中appear的用法
Aug 17 Javascript
Angular实现类似博客评论的递归显示及获取回复评论的数据
Nov 06 Javascript
js中数组对象去重的两种方法
Jan 18 Javascript
关于Layui Table隐藏列问题
Sep 16 Javascript
微信小程序实现canvas分享朋友圈海报
Jun 21 Javascript
如何在JS文件中获取Vue组件
Sep 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
浅谈Yii乐观锁的使用及原理
2017/07/25 PHP
超清晰的document对象详解
2007/02/27 Javascript
jquery.validate使用攻略 第一部
2010/07/01 Javascript
JS实现n秒后自动跳转的两种方法
2020/11/30 Javascript
JS禁止查看网页源代码的实现方法
2016/10/12 Javascript
react+redux的升级版todoList的实现
2017/12/18 Javascript
vue-cli启动本地服务局域网不能访问的原因分析
2018/01/22 Javascript
动态内存分配导致影响Javascript性能的问题
2018/12/18 Javascript
Node.js EventEmmitter事件监听器用法实例分析
2019/01/07 Javascript
Angular8引入百度Echarts进行图表分析的实现代码
2019/11/27 Javascript
通过实例解析JavaScript for in及for of区别
2020/06/15 Javascript
解决vue一个页面中复用同一个echarts组件的问题
2020/07/19 Javascript
Python学习笔记_数据排序方法
2014/05/22 Python
Python中pow()和math.pow()函数用法示例
2018/02/11 Python
对Python3+gdal 读取tiff格式数据的实例讲解
2018/12/04 Python
python之生成多层json结构的实现
2020/02/27 Python
Python 去除字符串中指定字符串
2020/03/05 Python
Django静态资源部署404问题解决方案
2020/05/11 Python
一篇文章带你搞定Ubuntu中打开Pycharm总是卡顿崩溃
2020/11/02 Python
想学画画?python满足你!
2020/12/24 Python
实例讲解CSS3中Transform的perspective属性的用法
2016/04/22 HTML / CSS
6号汽车旅馆预订:Motel 6
2018/02/11 全球购物
2014年党支部承诺书
2014/05/30 职场文书
陈胜吴广起义口号
2014/06/20 职场文书
2014领导干部学习焦裕禄同志先进事迹思想汇报
2014/09/19 职场文书
2014年保管员工作总结
2014/11/18 职场文书
2014年教育工作总结
2014/11/26 职场文书
世界卫生日宣传活动总结
2015/02/09 职场文书
创先争优个人总结
2015/03/04 职场文书
家长意见书
2015/06/04 职场文书
优秀党员先进事迹材料2016
2016/02/29 职场文书
导游词之无锡华莱坞
2019/12/02 职场文书
仅用一句SQL更新整张表的涨跌幅、涨跌率的解决方案
2021/05/06 MySQL
pytorch损失反向传播后梯度为none的问题
2021/05/12 Python
PostGIS的安装与入门使用指南
2022/01/18 PostgreSQL
Typescript类型系统FLOW静态检查基本规范
2022/05/25 Javascript