在子页面iframe.html里点击“全屏显示” 按钮，我是根据按钮的文本来判断调用父页面main.html定义的哪个方法。
在父页面的全屏事件，首先是调用API全屏方法，比如
requestFullscreen() 用于异步请求使元素进入全屏模式
，其次主要是让除了iframe标签，其余标签进行隐藏
;
让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关键代码：
<!--横向菜单开始-->
<div
class
=
"
grid_12
"
>
<!--横向菜单结束-->
<div
class
=
"
clear
"
></div>
<!--侧边菜单开始-->
<div
class
=
"
grid_2
"
>
<!--侧边菜单结束-->
<!--内容开始-->
<div style=
"
width: 82%;float: left;
"
>
<iframe id=
"
iframe
"
name=
"
mainFrame
"
src=
""
width=
"
100%
"
scrolling=
"
yes
"
frameborder=
"
0
"
></iframe>
<!--内容结束-->
<div
class
=
"
clear
"
></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() 方法
