全屏功能_iframe內建框內顯示全屏
全屏功能分三步：
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(){}方法包上
最後不要以為結束了；因為這是一個iframe框架內建iframe
所以記得尋找到屬於它的iframe 然後 在<iframe >裡面加上 allowFullScreen="true" 屬性,就ok了，反正我的程式碼就正常了