全屏思路
在子頁面iframe.html里點擊“全屏顯示” 按鈕，我是根據按鈕的文本來判斷調用父頁面main.html定義的哪個方法。
在父頁面的全屏事件，首先是調用API全屏方法，比如requestFullscreen() 用於異步請求使元素進入全屏模式，其次主要是讓除了iframe標簽，其余標簽進行隱藏display:none;讓iframe標簽固定定位，高寬%即可。
在父元素的退屏事件，首先是調用API退屏方法，其次主要是讓除了iframe標簽，其余標簽進行隱藏display:"" 為空，讓iframe標簽樣式還原(不一定按照我的來)。
瀏覽器兼容：
供應商前綴 1、webkit (Chrome, Safari, newer versions of Opera, almost all iOS browsers (including Firefox for iOS); basically, any WebKit based browser) 2、moz (Firefox) 3、o (Old, pre-WebKit, versions of Opera) 3、ms (Internet Explorer and Microsoft Edge) 更多：https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix
main.html頁面
html關鍵代碼：
<body>
<!--橫向菜單開始-->
<div class="grid_12">
...
</div>
<!--橫向菜單結束-->
<div class="clear"></div>
<!--側邊菜單開始-->
<div class="grid_2">
...
</div>
<!--側邊菜單結束-->
<!--內容開始-->
<div style="width: 82%;float: left;">
<iframe id="iframe" name="mainFrame" src="" width="100%" scrolling="yes" frameborder="0"></iframe>
</div>
<!--內容結束-->
</div>
<div class="clear"></div>
<div id="site_info"><p>Copyright...</p></div>
</body>
/*全屏iframe*/ function quan() { /*全屏iframe兼容*/ var docElm = document.documentElement; if (docElm.requestFullscreen) { docElm.requestFullscreen(); } else if (docElm.mozRequestFullScreen) { docElm.mozRequestFullScreen(); } else if (docElm.msRequestFullscreen) { docElm.msRequestFullscreen(); } else if (docElm.oRequestFullscreen) { docElm.oRequestFullscreen(); } else if (docElm.webkitRequestFullScreen) { docElm.webkitRequestFullScreen(); } $(".grid_12").css("display", "none"); $("#site_info").css("display", "none"); $("#full-screen-btn").css("display", "none"); $("iframe").css("height", "100%"); $("iframe").css("width", "100%"); $("iframe").css("position", 'fixed'); $("iframe").css("left", "0px"); $("iframe").css("top", "0px"); } /*退出全屏iframe*/ function exitQ() { var mainheight = $('.sidemenu').height(); 獲取側邊菜單高度 $(".grid_12").css("display", ""); $("#site_info").css("display", ""); $("#full-screen-btn").css("display", ""); /*退屏iframe兼容*/ if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.oRequestFullscreen) { document.oCancelFullScreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } $("iframe").css("height",mainheight + 'px'); 高度是側邊菜單高度，保持一致
$("iframe").css("width", "");
$("iframe").css("position", "");
$("iframe").css("left", "");
$("iframe").css("top", "");
}
iframe.html頁面
html關鍵代碼：
<div id="full-screen-btn">全屏顯示</div> //按鈕
<div>iframe子頁面的內容</div>
js部分關鍵代碼：
/*全屏顯示*/ $("#full-screen-btn").click(function () { if ($("#full-screen-btn").text() == "全屏顯示") { parent.quan(); $("#full-screen-btn").text("退出全屏"); } else { parent.exitQ(); $("#full-screen-btn").text("全屏顯示"); } });
其中 parent.quan(); 是原生js 子頁面調用父頁面的 quan() 方法