php退出页面父元素,jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码...
iframe和弹窗这些词对于js高手来说都是耳熟能详的东西,作为一个新人来说,还在学习阶段的我就在工作中遇到这么一个奇葩的需求,要在引入的iframe页面里做一个全屏化的功能.
粗略一看,这还不容易,模拟下F11的功能键什么的,于是网上一搜还真有一大堆关于全屏化的案例,遂借来用之.
然后高高兴兴的拿一个没有iframe引入的页面做了个测试页面查看全屏化功能效果,代码如下(fullScreenPage.html):
Control Tower
$("#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}");
}
}
}
嗯,我自己觉得这个效果真的是不要太棒了,还做了浏览器兼容(FireFox=mozRequestFullScreen;W3C=requestFullscreen;Chrome等=webkitRequestFullScreen;ie11=msRequestFullscreen).....
于是,我立马放到项目里,结果是什么样子呢?执行下面的代码(parentPage.html)就知道了....
Control Tower
哦豁,好像没生效,那么为什么呢?
很明显没有起作用,那么怎么办呢?既然引入的子页面iframe不生效,是不是从父页面或许就可以了?
那就赶紧试试找到父类并执行全屏功能,把页面(fullScreenPage.html)改一改,代码如下:
Control Tower
$("#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}");
}
}
}
哈哈,改了之后发现果然可以了,问题解决。
jQuery还请自行下载并导入引用,我这里就不细说了.
这里分享一个jQuery下载的地址:jquery下载所有版本(实时更新)
以上所述是小编给大家介绍的jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
php退出页面父元素,jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码...相关推荐
- html 块元素 css,HTML和CSS - 内嵌块元素的问题
我做了一个网站,其中显示主div,多个div(作为内联元素),这些div包含IMG和P元素.HTML和CSS - 内嵌块元素的问题 那么,如果我离开P元素(或没有p标签的文本),一切都可以,但是如果我 ...
- 内嵌html5,显示:内嵌HTML5元素
我正在寻找一个水平铺设的网站,但我遇到了显示问题:内嵌规则.显示:内嵌HTML5元素 它似乎是针对内联导航无序列表量身定制的,它完全覆盖了CSS中文章(和/或部分)的高度和宽度设置. 下面是HTML: ...
- chrome浏览器跨域Cookie的SameSite问题导致访问iframe内嵌页面异常
问题还原 通过cas单点登陆访问系统,通过一个系统内嵌入第三方系统的页面,同时第三方系统也配置了cas.访问一个系统跳转到登陆页面,然后内嵌入iframe中的第三方系统又进入登陆页面. 初步分析,该系 ...
- selenium登录斗鱼tv(切换iframe内嵌页面)
from selenium.webdriver import Chrome import time# 1.下载selenium # 2.将驱动放在python解释器文件夹中web = Chrome() ...
- 【转】在Asp.net中弹出对话框,然后跳转到其他页面问题
代码 在Asp.net 中弹出对话框是(Response.write不是好方法) Response.Write("<script>alert('注册成功!');</scri ...
- html块左右排列,html – 如何均匀地排列多个内嵌块元素?
我最近读了一个非常聪明的技巧来完成你所要求的工作. 简而言之,你只需要使用text-align:justify;在容器元素上实现这一点,结合一个额外的不可见块. 这是因为内联块元素被视为文本内容的一部 ...
- html如何整齐排列选择框,html – 如何均匀地排列多个内嵌块元素?
我最近读了一个非常聪明的技巧来完成你所要求的工作. 简而言之,你只需要使用text-align:justify;在容器元素上实现这一点,结合一个额外的不可见块. 这是因为内联块元素被视为文本内容的一部 ...
- html全屏banner轮播代码,基于jquery实现全屏banner自动轮播切换
特效描述:基于jquery实现 全屏banner 自动轮播切换.基于jquery实现全屏banner自动轮播切换 代码结构 1. 引入JS 2. HTML代码 *{margin:0;padding:0 ...
- 微信小程序与webview H5交互(内嵌H5跳转原生页面)
在开发中,使用web-view组件内嵌H5页面是非常常见的,但很多人不知道webview内嵌H5如何与原生小程序 交互.下面介绍下实现微信小程序与webview H5交互的方法. web-view功能 ...
最新文章
- angular 命令行项目_Angular命令行界面介绍
- Adapter模式的好处
- java表格标题栏_Java MFixedColumnTable (提供行标题栏的表格)
- 谷歌的网页排序算法(PageRank Algorithm)
- Dev-C++ 5.11安装教程
- lightning接口_苹果手机接口未来将和安卓手机统一——欧盟通过正式决议
- feign整合sential,Feign中使用Sentinel熔断器防止服务雪崩
- PC软件开发技术之二:用C#开发基于自动化接口的OPC客户端
- .net常用面试核心技术点(持续更新中)
- c++ vector使用方法收集
- C语言项目实战—坦克大战
- Flutter 之页面状态保持
- 依赖多个项目,重复jar包不同版本冲突解决
- 《Adobe Premiere Pro CS4经典教程》——复习
- 从Windows过渡到Mac OS X上手使用经验谈
- 乐视账号服务器关闭,乐视手机重置后无法登录账号 官方给出解决方案
- 局域网搭建视频服务器
- 智能控制 复习资料之第三章专家系统
- 十月下旬腾讯 网易游戏 百度迅雷校园招聘笔试题集锦 第271 330题
- ECharts实现数据可视化超详细基础入门教程
热门文章
- SQL语言之DQL语言学习(八)多表查询/链接查询 SQL92学习
- 学习Python一定要知道的在定义变量中的三个特征
- Python:为什么只有一个元素的tuple要加逗号?
- python中if not x: 和 if x is not None: 和 if not x is None的使用和区别
- Django基于正则表达式的URL
- html css web笔记,Web/HTML/CSS/的笔记
- shell 输出数据到文本_Linux运维工程师从基础到进阶:Shell变量知识梳理
- 为什么读写文件要有缓冲区?为什么要有输入输出缓冲区?
- C/C++ 如何快速解构一个系统的源码(如何看懂大型工程项目的源码)
- python timeit class Timer()类 timeit(string, string) repeat(string, string) default_timer() 耗时检测 执行速度