纯JS解决内嵌iframe全屏（兼容IE/火狐/谷歌）

最新推荐文章于 2024-04-22 01:50:28 发布

半仙code

最新推荐文章于 2024-04-22 01:50:28 发布

阅读量3.1k

点赞数

分类专栏： JS 文章标签： iframe全屏

本文链接：https://blog.csdn.net/liz9411/article/details/90696530

版权

JS 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

遇到一些政府/国企开发时经常遇到兼容IE的问题，给大家介绍一种我刚研究出的一种解决方案

1.代码

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="utf-8">
    <script type="text/javascript" src="./../jquery/jquery-1.11.3.min.js"></script>
        <title>fullScreen</title>
        <style>
            body {
                margin: 0;
            }
        </style>
    
    
 <script type="text/javascript">
 
 $(document).keydown(function(event){
	　　　　if(event.keyCode == 27){
	　　　　　　//这里写你原始的iframe的大小
	      //例如
		 document.getElementById("fullScreen").style.height="500px";
         document.getElementById("fullScreen").style.width="500px";
	　　　　}
	　　});
 
 
 function showFullScreen(){
	             var elm = document.getElementById("fullScreen");
	             launchFullscreen(elm );
	         }      
	         // 全屏，退出按esc或参考参考参考注释代码写退出全屏按钮
	         function launchFullscreen(element) {
	         	
	             if (element.requestFullscreen) {
	                 element.requestFullscreen();
	             } else if (element.mozRequestFullScreen) {
	                 element.mozRequestFullScreen();//火狐
	             } else if (element.msRequestFullscreen) {
	                 element.msRequestFullscreen();//ie浏览器
	                 document.getElementById("fullScreen").style.height=window.screen.height+"px";
	                 document.getElementById("fullScreen").style.width=document.documentElement.clientWidth+"px";
	             } else if (element.webkitRequestFullscreen) {
	                 element.webkitRequestFullScreen();//谷歌浏览器
	             }
	         }
 </script>
    </head>
<body>

    <iframe id="fullScreen" allowfullscreen src="www.baidu.com"  
       frameborder="0" style="width: 500px;height: 500px;background:#aaa">
    </iframe>
    <button onclick="showFullScreen();">全屏</button>
</body>

解决思路：

1.全屏

通过判断出各个浏览器内核的不同分别给出不同的解决方案

2.退出全屏时

通过监控ESC健，动态设置iframe的大小（主要是为了兼容IE，谷歌等成熟浏览器会自动处理）

1.在子页面也要写监控ESC事件

2.要在子页面设置 resize事件，常识了对吧（为了防止极端事件）

半仙code

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
纯JS解决内嵌iframe全屏（兼容IE/火狐/谷歌）

遇到一些政府/国企开发时经常遇到兼容IE的问题，给大家介绍一种我刚研究出的一种解决方案1.代码<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <script type="text/javascript" src="./../jquer...
复制链接

扫一扫