您的位置：首页 > 其它

全屏功能_iframe内置框内显示全屏

2017-08-08 21:21 204 查看

全屏功能分三步：

1.开启全屏：

<script type="text/javascript">

/* 全屏启动方法 */
function fullScreen(el) {

var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen,

wscript;



if(typeof rfs != "undefined" && rfs) {

rfs.call(el);

return;

}



if(typeof window.ActiveXObject != "undefined") {

wscript = new ActiveXObject("WScript.Shell");

if(wscript) {

wscript.SendKeys("{F11}");

}

}

}

// 退出全屏功能

function exitFullScreen(el) {

var el= document,

cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullScreen,

wscript;



if (typeof cfs != "undefined" && cfs) {

cfs.call(el);

return;

}



if (typeof window.ActiveXObject != "undefined") {

wscript = new ActiveXObject("WScript.Shell");

if (wscript != null) {

wscript.SendKeys("{F11}");

}

}

}

</script>

这里的requestFullScreen、webkitRequestFullScreen 、mozRequestFullScreen 是代表不同的浏览器，谷歌是webkitRequestFullScreen，判断好了，用elem.requestfullmap.call()即可对相关的节点进行全屏

2.body内写内容：我此处是百度地图，自己看着修改自己的业务代码吧

<body>

<div align="right"><span style="color:red;">按Esc退出全屏</span></div>

<div align="left"><input id="btn" type="button" class="btn" style="border:none;" value="切换全屏" /> </div>

<div id="map" class="right-m headDiv" >
<div id="allmap"></div>

</body>

3.开始调用

   <script type="text/javascript">

window.onload=function(){

var btn = document.getElementById('btn');

var content = document.getElementById('allmap');

btn.onclick = function(){

fullScreen(content);

};

var quite = document.getElementById('quite');

quite.onclick = function(){

exitFullScreen();

};

};

</script>

切记js的先渲染后加载原则，这里的事件记得被$(function(){}); 或者 window.onload=function(){}方法包上

最
bc54
后不要以为结束了；因为这是一个iframe框架内置iframe

所以记得寻找到属于它的iframe 然后在<iframe >里面加上 allowFullScreen="true" 属性,就ok了，反正我的代码就正常了

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航