admin管理员组文章数量:1558103
遇到一些政府/国企开发时经常遇到兼容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"
frameborder="0" style="width: 500px;height: 500px;background:#aaa">
</iframe>
<button onclick="showFullScreen();">全屏</button>
</body>
解决思路:
1.全屏
通过判断出各个浏览器内核的不同分别给出不同的解决方案
2.退出全屏时
通过监控ESC健,动态设置iframe的大小(主要是为了兼容IE,谷歌等成熟浏览器会自动处理)
ps
1.在子页面也要写监控ESC事件
2.要在子页面设置 resize事件,常识了对吧(为了防止极端事件)
版权声明:本文标题:纯JS解决内嵌iframe全屏(兼容IE火狐谷歌) 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dongtai/1727374415a1111539.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论