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 相关文章推荐
arguments对象
Nov 20 Javascript
有一段有意思的代码-javascript现实多行信息
Aug 26 Javascript
javascript动态添加、修改、删除对象的属性与方法详解
Jan 27 Javascript
js中this的用法实例分析
Jan 10 Javascript
D3.js实现雷达图的方法详解
Sep 22 Javascript
浅谈EasyUI常用控件的禁用方法
Nov 09 Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
你可能不知道的前端算法之文字避让(inMap)
Jan 12 Javascript
动态加载JavaScript文件的3种方式
May 05 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
Sep 07 Javascript
跨域请求两种方法 jsonp和cors的实现
Nov 11 Javascript
Vue-CLI3.x 设置反向代理的方法
Dec 06 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
《魔兽争霸3:重制版》翻车了?你想要的我们都没有
2019/11/07 魔兽争霸
php实现简单的上传进度条
2015/11/17 PHP
PHP中字符串长度的截取用法示例
2017/01/12 PHP
Yii框架的路由配置方法分析
2019/09/09 PHP
PHP全局使用Laravel辅助函数dd
2019/12/26 PHP
javascript 面向对象编程 万物皆对象
2009/09/17 Javascript
JavaScript的变量作用域深入理解
2009/10/25 Javascript
js读写(删除)Cookie实例详解
2013/04/17 Javascript
javascript如何使用bind指定接收者
2014/05/04 Javascript
JavaScript定时器和优化的取消定时器方法
2015/07/03 Javascript
js模拟淘宝网的多级选择菜单实现方法
2015/08/18 Javascript
window.location.hash知识汇总
2015/11/09 Javascript
js 动态给元素添加、移除事件的实现方法
2016/07/19 Javascript
vue 插值 v-once,v-text, v-html详解
2018/01/19 Javascript
JavaScript创建对象方法实例小结
2018/09/03 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
2019/10/14 Javascript
js实现数字从零慢慢增加到指定数字示例
2019/11/07 Javascript
Node绑定全局TraceID的实现方法
2019/11/14 Javascript
Vue实现兄弟组件间的联动效果
2020/01/21 Javascript
vuex(vue状态管理)的特殊应用案例分享
2020/03/03 Javascript
js实现全选和全不选
2020/07/28 Javascript
基于vue实现简易打地鼠游戏
2020/08/21 Javascript
解决antd 下拉框 input [defaultValue] 的值的问题
2020/10/31 Javascript
Python中的异常处理相关语句基础学习笔记
2016/07/11 Python
通过Pandas读取大文件的实例
2018/06/07 Python
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
2016/03/15 HTML / CSS
欧洲最大的化妆品连锁公司:Douglas道格拉斯
2017/05/06 全球购物
我们是伦敦女孩:WalG
2018/01/08 全球购物
丝芙兰香港官网:Sephora香港
2018/03/13 全球购物
意大利时尚精品店:Nugnes 1920
2020/02/10 全球购物
嘻哈珠宝品牌:KRKC&CO
2020/10/19 全球购物
小学生寒假家长评语
2014/04/16 职场文书
公司户外活动总结
2014/07/04 职场文书
2014年干部作风建设总结
2014/10/23 职场文书
地道战观后感2000字
2015/06/04 职场文书
行政处罚听证告知书
2015/07/01 职场文书