iframe が埋め込まれたページ要素を親ページにポップアップし、全画面でテストします (コードが添付されています)。-htmlチュートリアル-php.cn

iframe が埋め込まれたページ要素を親ページにポップアップし、全画面でテストします (コードが添付されています)。

高洛峰

リリース： 2017-03-15 11:49:52

オリジナル

1749 人が閲覧しました

フレームとポップアップウィンドウという言葉は、jsの専門家にとってはよく知られたものですが、私はまだ学習段階にあったときに、フルスクリーンを作成する必要があるという奇妙な要求に遭遇しました。 Ramのページにある関数です

F11などのファンクションキーをシミュレートしたところ、フルスクリーンに関する事例がたくさんあったので拝借しました。次に、iframe のないページを取得し、全画面機能の効果を確認するためのテストページを作成しました。コードは次のとおりです (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>

ログイン後にコピー

まあ、この効果はそれほど大きくないと思います。ブラウザーとも互換性があります (FireFox=mozRequestFullScreen;

W3C

=requestFullscreen;

Chrome など=webkitRequestFullScreen;ie11=msRequestFullscreen)...それで、すぐにプロジェクトに入れてみたところ、結果は次のようになりました。次のコード (parentPage.html) を実行するとわかります。導入してからは子ページのiframeが有効になりません

そこで早速親クラスを見つけてフルスクリーン機能を実行してみてください( 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="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>

ログイン後にコピー

はは、それを変更した後、機能することがわかり、問題は解決されました。

以上がiframe が埋め込まれたページ要素を親ページにポップアップし、全画面でテストします (コードが添付されています)。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。