JavaScript ポップアップウィンドウの技術概要の共有-PHPチュートリアル-php.cn

ホームページ

バックエンド開発

PHPチュートリアル

JavaScript ポップアップウィンドウの技術概要の共有

小云云

Mar 15, 2018 pm 02:12 PM

javascriptjs

この記事では主に JavaScript ポップアップウィンドウの技術的な概要を説明します。ポップアップウィンドウのパラメータはオプションであり、カンマで区切られています。文字列 -- オブジェクトテーブルをカンマで区切ってリストします。各項目には独自の値があり、それらは分離されます (例: "fullscreen=yes、toolbar=yes")。以下に、サポートされているさまざまな機能を示します。

channelmode = { yes | no | 0 } デフォルトは no ですデフォルトはyes | no最小値は100です値は 0 以上である必要があります | menubar = { はい 1 | 0 }デフォルトは、yesデフォルトは、yesstatus = { yes | no | 0}デフォルトは、yes 1 | 0 }です。 top =number

1. 最も基本的なポップアップウィンドウのコード

　<script> 
　　<!-- 
　　window.open (&#39;page.html&#39;) 
　　--> 
　　</script>

これはJavaScriptのコードなので、

の間に配置する必要があります。

一部の古いブラウザでは動作し、タグ内のコードはテキストとして表示されません。この良い習慣を身につけてください。 window.open ('page.html') は、新しいウィンドウ page.html のポップアップを制御するために使用されます。page.html がメインウィンドウと同じパスにない場合は、そのパスを先頭に記述する必要があります。絶対パス (http://) と相対パス (../) を使用できます。一重引用符または二重引用符のいずれかを使用できますが、混合しないでください。このコードは HTML 内の任意の位置 ( との間) に追加できます。コードが前にあるほど、より早く実行されます。特にページのコードが長く、より早くページを表示したい場合は、できるだけ前に置くようにしてください。

2. 設定後のポップアップウィンドウ

次に、ポップアップウィンドウの設定について説明します。上記のコードにもう少し追加するだけです。ページの特定の条件に合わせて、このポップアップウィンドウの外観、サイズ、ポップアップの位置をカスタマイズしてみましょう。

　<script> 
　　<!-- 
　　window.open (&#39;page.html&#39;, &#39;newwindow&#39;, &#39;height=100, width=400, top=0, left=0, 
toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no&#39;) 
//这句要写成一行
　　--> 
　　</script>

パラメータの説明:
js スクリプトは終了します

3. 関数を使用してポップアップウィンドウを制御します

以下は完全なコードです。

<html> 
　　<head> 
　　<script LANGUAGE="JavaScript"> 
　　<!-- 
　　function openwin() { 
　　window.open ("page.html", "newwindow", "height=100, 
width=400, toolbar =no, menubar=no, scrollbars=no, resizable=no, location=no, 
status=no") 
//写成一行
　　} 
　　//--> 
　　</script> 
　　</head> 
　　<body onload="openwin()"> 
　　任意的页面内容... 
　　</body> 
　　</html>

ここではopenwin()という関数が定義されており、関数の内容はウィンドウを開くというものです。呼び出されるまでは何の役にも立ちません。なんと呼びますか？

方法 1

ブラウザがページを読み取るとウィンドウがポップアップします。
方法 2: ブラウザがページウィンドウを離れるときに起動します。方法 3
: 接続を使用して呼び出します: ウィンドウを開きます注: #" は仮想接続を使用します。
方法4: ボタンで呼び出します:

4. 2つのウィンドウを同時にポップアップします
ソースへコードを少し変更します:

<script LANGUAGE="JavaScript"> 　　 　　</script>

2つのポップアップウィンドウが重ならないようにするには、topとleftを使ってポップアップの位置を制御し、重ならないようにします。最後に、上記の 4 つのメソッドを使用して呼び出すことができます。

注

: 2 つのウィンドウ (newwindows と newwindow2) の名前は同じであってはなりません。あるいは、すべて空である必要があります。

5. メインウィンドウでファイル 1.htm を開くと、小さなウィンドウ page.html が同時にポップアップ表示されます。次のコードをメインウィンドウ領域に追加します。

" onclick="openwin()" >開く。 6. ポップアップウィンドウのタイミング制御を閉じる
次に、ポップアップウィンドウに対していくつかの制御を実行します。これにより、効果がさらに良くなります。ポップアップページに小さなコードを追加して (メインページではなく、page.html の HTML に追加されることに注意してください)、10 秒後に自動的に閉じるようにしたら、もっとクールだと思いませんか?

まず、page.htmlファイル領域に次のコードを追加します。

<script language="JavaScript"> 
　　function closeit() 
　　{ 
　　setTimeout("self.close()",10000) 　
//毫秒
 
　　} 
　　</script>

　　然后，再用

这一句话代替page.html中原有的这一句就可以了。(这一句话千万不要忘记写啊！这一句的作用是调用关闭窗口的代码，10秒钟后就自行关闭该窗口。)
7、在弹出窗口中加上一个关闭按钮

<FORM> 
　　<INPUT TYPE=&#39;BUTTON&#39; VALUE=&#39;关闭&#39; onClick=&#39;window.close()&#39;> 
　　</FORM>

　　呵呵，现在更加完美了！
8、内包含的弹出窗口-一个页面两个窗口　　上面的例子都包含两个窗口，一个是主窗口，另一个是弹出的小窗口。通过下面的例子，你可以在一个页面内完成上面的效果。

　<html> 
　　<head> 
　　<SCRIPT LANGUAGE="JavaScript"> 
　　function openwin() 
　　{ 
　　OpenWindow=window.open("", "newwin", "height=250, width=250,toolbar=no 
,scrollbars="+scroll+",menubar=no"); 
　　//写成一行 
　　OpenWindow.document.write("<TITLE>例子</TITLE>") 
　　OpenWindow.document.write("<BODY BGCOLOR=#ffffff>") 
　　OpenWindow.document.write("<h1 id="Hello">Hello!</h1>") 
　　OpenWindow.document.write("New window opened!") 
　　OpenWindow.document.write("</BODY>") 
　　OpenWindow.document.write("</HTML>") 
　　OpenWindow.document.close() 
　　} 
　　</SCRIPT> 
　　</head> 
　　<body> 
　　<a href="#" onclick="openwin()">打开一个窗口</a> 
　　<input type="button" onclick="openwin()" value="打开窗口"> 
　　</body> 
　　</html>

　　看看OpenWindow.document.write()里面的代码不就是标准的HTML吗？只要按照格式写更多的行即可。千万注意多一个标签或少一个标签就会出现错误。记得用 OpenWindow.document.close()结束啊。
9、终极应用--弹出的窗口之Cookie控制
　　回想一下，上面的弹出窗口虽然酷，但是有一点小毛病，比如你将上面的脚本放在一个需要频繁经过的页面里(例如首页)，那么每次刷新这个页面，窗口都会弹出一次，我们使用cookie来控制一下就可以了。
　　首先，将如下代码加入主页面HTML的

区：

<script> 
　　function openwin(){ 
　　window.open("page.html","","width=200,height=200") 
　　} 
　　function get_cookie(Name) { 
　　var search = Name + "=" 
　　var returnvalue = ""; 
　　if (document.cookie.length > 0) { 
　　offset = document.cookie.indexOf(search) 
　　if (offset != -1) { 
　　offset += search.length 
　　end = document.cookie.indexOf(";", offset); 
　　if (end == -1) 
　　end = document.cookie.length; 
　　returnvalue=unescape(document.cookie.substring(offset, end)) 
　　} 
　　} 
　　return returnvalue; 
　　} 　
　　function loadpopup(){ 
　　if (get_cookie(&#39;popped&#39;)==&#39;&#39;){ 
　　openwin() 
　　document.cookie="popped=yes" 
　　} 
　　} 
　　</script>

然后，用

（注意不是openwin而是loadpop啊！）替换主页面中原有的这一句即可。你可以试着刷新一下这个页面或重新进入该页面，窗口再也不会弹出了。

相关推荐：

jQuery实现简单的弹出窗口实例

JS弹出窗口的运用与技巧大全

jQuery实现的模拟弹出窗口功能示例

		1 \| 0ウィンドウにラダーモードを表示するかどうか
	fullscreen = { yes no 1 }	フルスクリーンモードで表示するかどうか
	height =number	ウィンドウを指定します高さ、単位はピクセルです
	left =number	左端からのウィンドウの距離を指定します、単位はピクセル
	location = { yes no 1 \|	ウィンドウにアドレスバーを表示するかどうかを指定します
ウィンドウにメニューバーを表示するかどうかを指定します		サイズ変更可能 = { はい 1 \| 0 }ユーザーがサイズを変更できるウィンドウ内のハンドル
	scrollbars = { yes no 1 }	ウィンドウに水平スクロールバーを表示するか垂直スクロールバーを表示するかを指定します

ウィンドウにタイトルバーを表示するかどうかを指定します。 HTML アプリケーションまたはダイアログボックスを呼び出していない場合、この項目は無視されます。進む、戻る、停止などのボタンが含まれます。	デフォルトは、yes
ウィンドウの幅を指定します。単位はピクセルです	最小値は100です
ウィンドウの上部を指定します位置、単位はピクセルです	値は以下である必要があります0

以上がJavaScript ポップアップウィンドウの技術概要の共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

アクション中のPHP：実際の例とアプリケーションApr 14, 2025 am 12:19 AM

PHPは、電子商取引、コンテンツ管理システム、API開発で広く使用されています。 1）eコマース：ショッピングカート機能と支払い処理に使用。 2）コンテンツ管理システム：動的コンテンツの生成とユーザー管理に使用されます。 3）API開発：RESTFUL API開発とAPIセキュリティに使用されます。パフォーマンスの最適化とベストプラクティスを通じて、PHPアプリケーションの効率と保守性が向上します。

PHP：インタラクティブなWebコンテンツを簡単に作成しますApr 14, 2025 am 12:15 AM

PHPにより、インタラクティブなWebコンテンツを簡単に作成できます。 1）HTMLを埋め込んでコンテンツを動的に生成し、ユーザー入力またはデータベースデータに基づいてリアルタイムで表示します。 2）プロセスフォームの提出と動的出力を生成して、XSSを防ぐためにHTMLSPECIALCHARSを使用していることを確認します。 3）MySQLを使用してユーザー登録システムを作成し、Password_HashおよびPreprocessingステートメントを使用してセキュリティを強化します。これらの手法を習得すると、Web開発の効率が向上します。

PHPとPython：2つの一般的なプログラミング言語を比較しますApr 14, 2025 am 12:13 AM

PHPとPythonにはそれぞれ独自の利点があり、プロジェクトの要件に従って選択します。 1.PHPは、特にWebサイトの迅速な開発とメンテナンスに適しています。 2。Pythonは、データサイエンス、機械学習、人工知能に適しており、簡潔な構文を備えており、初心者に適しています。

PHPは依然として動的であり、現代のプログラミングの分野で重要な位置を占めています。 1）PHPのシンプルさと強力なコミュニティサポートにより、Web開発で広く使用されています。 2）その柔軟性と安定性により、Webフォーム、データベース操作、ファイル処理の処理において顕著になります。 3）PHPは、初心者や経験豊富な開発者に適した、常に進化し、最適化しています。

PHPの現在のステータス：Web開発動向を見てくださいApr 13, 2025 am 12:20 AM

PHPは、現代のWeb開発、特にコンテンツ管理とeコマースプラットフォームで依然として重要です。 1）PHPには、LaravelやSymfonyなどの豊富なエコシステムと強力なフレームワークサポートがあります。 2）パフォーマンスの最適化は、Opcacheとnginxを通じて達成できます。 3）PHP8.0は、パフォーマンスを改善するためにJITコンパイラを導入します。 4）クラウドネイティブアプリケーションは、DockerおよびKubernetesを介して展開され、柔軟性とスケーラビリティを向上させます。

PHP対その他の言語：比較Apr 13, 2025 am 12:19 AM

PHPは、特に迅速な開発や動的なコンテンツの処理に適していますが、データサイエンスとエンタープライズレベルのアプリケーションには良くありません。 Pythonと比較して、PHPはWeb開発においてより多くの利点がありますが、データサイエンスの分野ではPythonほど良くありません。 Javaと比較して、PHPはエンタープライズレベルのアプリケーションでより悪化しますが、Web開発により柔軟性があります。 JavaScriptと比較して、PHPはバックエンド開発により簡潔ですが、フロントエンド開発のJavaScriptほど良くありません。

PHP対Python：コア機能と機能Apr 13, 2025 am 12:16 AM

PHPとPythonにはそれぞれ独自の利点があり、さまざまなシナリオに適しています。 1.PHPはWeb開発に適しており、組み込みのWebサーバーとRich Functionライブラリを提供します。 2。Pythonは、簡潔な構文と強力な標準ライブラリを備えたデータサイエンスと機械学習に適しています。選択するときは、プロジェクトの要件に基づいて決定する必要があります。

PHP：Web開発の重要な言語Apr 13, 2025 am 12:08 AM

PHPは、サーバー側で広く使用されているスクリプト言語で、特にWeb開発に適しています。 1.PHPは、HTMLを埋め込み、HTTP要求と応答を処理し、さまざまなデータベースをサポートできます。 2.PHPは、ダイナミックWebコンテンツ、プロセスフォームデータ、アクセスデータベースなどを生成するために使用され、強力なコミュニティサポートとオープンソースリソースを備えています。 3。PHPは解釈された言語であり、実行プロセスには語彙分析、文法分析、編集、実行が含まれます。 4.PHPは、ユーザー登録システムなどの高度なアプリケーションについてMySQLと組み合わせることができます。 5。PHPをデバッグするときは、error_reporting（）やvar_dump（）などの関数を使用できます。 6. PHPコードを最適化して、キャッシュメカニズムを使用し、データベースクエリを最適化し、組み込み関数を使用します。 7

See all articles