父窗口点击一个图片(或图标),用iframe链接到其他地址,并且在父级窗口全屏展示

本文介绍了如何在HTML页面中,通过点击图片或图标使iframe全屏显示,并在全屏模式下加载其他URL内容。重点讨论了全屏API的使用、iframe的交互以及浏览器的安全机制,包括esc键监听的限制。文中提供了相关参考资料和完整代码示例。
摘要由CSDN通过智能技术生成

知识点:

注意:当窗口全屏,keyup,keydown类似事件是监听不到esc按键的,这是浏览器一个安全机制。如果不是全屏模式还是可以监听到的。

全屏的操作:

借鉴文档:

https://blog.csdn.net/k358971707/article/details/60465689

https://www.cnblogs.com/zhangwei595806165/p/4844551.html

http://www.zhangxinxu.com/wordpress/2012/10/html5-full-screen-api-firefox-chrome-difference/

https://blog.csdn.net/tywali/article/details/8623938

https://segmentfault.com/q/1010000009988182

https://www.cnblogs.com/minghui007/p/5601194.html

https://blog.csdn.net/tywali/article/details/8623938

获取iframe中document对象和window:

借鉴文档:

https://blog.csdn.net/theforever/article/details/6126635

https://blog.csdn.net/wangjun5159/article/details/78647615

http://caibaojian.com/js-get-iframe.html

jquery重定向:

https://blog.csdn.net/zhouranlovesmile/article/details/68936984

以上是借鉴的资料:

需求描述:

在a.html页面,嵌入一个iframe. 在a.html中点击一个图标,让iframe全屏展示,并且iframe展示其他页面的内容

我的思路:
添加iframe为了让窗口全屏时展示其他页面的内容,这里我的思路是让iframe全屏展示


让iframe全屏展示的方法(该方法调用的事h5新出的api涉及到兼容性问题)

其中bindIframeKeyup是我自己加的方法,是多余的,对你们来讲没啥用


我是点击img触发iframe大屏操作:


当iframe大屏以后需要对iframe中的内容进行操作,要清楚iframe中世纪装的是一个完整的ht

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值