Pop up the iframe embedded page element to the parent page and test it in full screen (code attached)-HTML Tutorial-php.cn

Pop up the iframe embedded page element to the parent page and test it in full screen (code attached)

高洛峰

Release： 2017-03-15 11:49:52

Original

1755 people have browsed it

The words

frame and pop-up window are familiar to js masters. As a newcomer, I encountered such a strange demand at work when I was still in the learning stage. We need to make a full-screen function in the imported iframe page.

At first glance, this is not easy. I simulated the function keys of F11 or something, so I searched online. There are really a lot of cases about full-screen, so I borrowed them.

Then I happily took a page without iframe introduction and made a test page to see the effect of full-screen function. The code is as follows (fullScreenPage. html):

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Control Tower</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body style="margin: 0px;height: 100%;width: 100%;">
    <div id="buttonPanel" style="position: absolute;left: 25%;z-index:100">
        <input id="full_screen_open" type="button" value="打开全屏">
        <input id="full_screen_close" type="button" value="退出全屏" style="display: none">
    </div>
    <div id="container" style="display:table;height: 50%;width: 50%;background-color: #004981;position:absolute;left: 25%;">
        <div style="display:table-cell;height: 50%;width: 50%;text-align: center;vertical-align: middle;border: 2px solid #DDDDDD;">
            <font id="font" size="30"></font>
        </div>
    </div>
</body>
<script src="./scripts/jquery/jquery-1.11.3.js" type="text/javascript"></script>
<script type="text/javascript">
$("#full_screen_open").on("click",function(){
    requestFullScreen($("#container")[&#39;0&#39;]);
    $("#font").empty();
    $("#font").text("已打开全屏化");
});
var requestFullScreen = function(element) {
    var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
    if (requestMethod) {
        requestMethod.call(element);
    } else if (typeof window.ActiveXObject !== "undefined") {
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript !== null) {
            wscript.SendKeys("{F11}");
        }
    }
}
</script>
</html>

Copy after login

Well, I think this effect is really not great, and I also made it browser compatible (FireFox=mozRequestFullScreen;W3C=requestFullscreen;Chr omeetc.=webkitRequestFullScreen;ie11=msRequestFullscreen)....

So, I immediately put it into the project, what is the result? Execute the following code (parentPage.html) and you will know ....

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Control Tower</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body style="margin: 0px;height: 100%;width: 100%;">
    <div id="parentContainer" style="height: 75%;width: 75%;position:absolute;left: 12.5%;border: 2px solid red;">
        <!-- 蓝色边框以内的内容是引入的iframe页面内容,也是需要做全屏化功能的页面 -->
        <iframe src="fullScreenPage.html" style="border: 2px solid blue;height: 100%;width: 100%;"></iframe>
    </div>
</body>
</html>

Copy after login

Oh, it doesn’t seem to work, so why?

It obviously doesn’t work, so what should I do? Since the introduced sub-page iframe does not take effect, right? Maybe it’s ok from the parent page?

Then quickly try to find the parent class and execute the full screen function, change the page (fullScreenPage.html), the code is as follows:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Control Tower</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body style="margin: 0px;height: 100%;width: 100%;">
    <div id="buttonPanel" style="position: absolute;left: 25%;z-index:100">
        <input id="full_screen_open" type="button" value="打开全屏">
        <input id="full_screen_close" type="button" value="退出全屏" style="display: none">
    </div>
    <div id="container" style="display:table;height: 50%;width: 50%;background-color: #004981;position:absolute;left: 25%;">
        <div style="display:table-cell;height: 50%;width: 50%;text-align: center;vertical-align: middle;border: 2px solid #DDDDDD;">
            <font id="font" size="30"></font>
        </div>
    </div>
</body>
<script src="./scripts/jquery/jquery-1.11.3.js" type="text/javascript"></script>
<script type="text/javascript">
$("#full_screen_open").on("click",function(){
    /* 获取父类的document */
    var parentDoc = parent.document;
    /* 定义一个接收元素的变量 */
    var thisIframe = null;
    /* 用jQuery遍历父类的所有iframe,找到我引入的那个iframe,
          假设我不知道是哪个页面要引入我的iframe,但是引入我的iframe的src肯定会有引入这个页面的名字,
          所以通过这个去检索,一定能找到引入这个页面的iframe,然后把这个iframe的元素全屏化也就是把原来的页面全屏化 */
    $("iframe",window.parent.document).each(function(index,e){
        if (e.src.indexOf("fullScreenPage.html") > 0) {
            thisIframe = e;
            return false;
        }
    });
    requestFullScreen(thisIframe);
    $("#font").empty();
    $("#font").text("已打开全屏化");
});
var requestFullScreen = function(element) {
    var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
    if (requestMethod) {
        requestMethod.call(element);
    } else if (typeof window.ActiveXObject !== "undefined") {
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript !== null) {
            wscript.SendKeys("{F11}");
        }
    }
}
</script>
</html>

Copy after login

Haha, After changing it, I found that it worked and the problem was solved.

The above is the detailed content of Pop up the iframe embedded page element to the parent page and test it in full screen (code attached). For more information, please follow other related articles on the PHP Chinese website!