ホームページ > 記事 > ウェブフロントエンド > iframe が埋め込まれたページ要素を親ページにポップアップし、全画面でテストします (コードが添付されています)。
iframe が埋め込まれたページ要素を親ページにポップアップし、全画面でテストします (コードが添付されています)。
- 高洛峰オリジナル
- 2017-03-15 11:49:521731ブラウズ
フレームとポップアップウィンドウという言葉は、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")['0']);
$("#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 サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。