showModalDialog モーダルダイアログボックスとブラウザの互換性_JavaScript スキルの使用方法の詳細な説明-jsチュートリアル-php.cn

showModalDialog モーダルダイアログボックスとブラウザの互換性_JavaScript スキルの使用方法の詳細な説明

WBOY

リリース： 2016-05-16 17:04:27

オリジナル

1397 人が閲覧しました

1.モーダルダイアログとは何ですか?
showModalDialog は、window.open と同様に、新しいページを開きます。
違いは、showModalDialog が子ウィンドウを開いた後、親ウィンドウはフォーカスを取得できない (つまり、操作できない) ことです。
親ウィンドウがこの戻り値を取得できるように、子ウィンドウで window.returnValue の値を設定できます。

2. 例
1) メインウィンドウ main.html、
2) メインウィンドウの showModalDialog でサブウィンドウ sub.html を開きます
3)サブウィンドウウィンドウ内で returnValue を設定し、

を使用してメインウィンドウに返します。

main.html

コードをコピーコードは次のとおりです:

<script><br>functionshowmodal()<br>{ <br> varret=window.showModalDialog("sub.html?temp=" Math.random());<br>alert("subreturnvalueis" ret);<br>}<br></script>
 

sub.html

コードをコピーコードは次のとおりです:

< ;HTML>
 
<script><br>functionreturnMain()<br>{<br>window .returnValue="returnfromsub";<br>window.close();<br>}<br></script>

特别说明：在main.html中showModalDialog的方法时，有使用到Math.random()的目的是避免缓存。

3.showModalDialog详细使用
vReturnValue=window.showModalDialog(sURL[,vArguments][,sFeatures])
sURL
必选参数，类型：字符串。用来指定对话框要显示的文档的URL。
vArguments
可选参数，类型：变体。用来向对话框传递参数。传递的参数类型不限，包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。
sFeatures
可选参数，类型：字符串。用来描述对话框的外观等信息，可以使用以下的一个或几个，用分号“;”隔开。
dialogHeight对话框高度，不小于100px，ＩＥ４中dialogHeight和dialogWidth默认的单位是em，而ＩＥ５中是px，为方便其见，在定义modal方式的对话框时，用px做单位。
dialogWidth:对话框宽度。
dialogLeft:距离桌面左的距离。
dialogTop:离桌面上的距离。
center:{yes|no|1|0}：窗口是否居中，默认yes，但仍可以指定高度和宽度。
help:{yes|no|1|0}：是否显示帮助按钮，默认yes。
resizable:{yes|no|1|0}［ＩＥ５＋］：是否可被改变大小。默认no。
status:{yes|no|1|0}［IE5+］：是否显示状态栏。默认为yes[Modeless]或no[Modal]。
scroll:{yes|no|1|0|on|off}：指明对话框是否显示滚动条。默认为yes。

还有几个属性是用在HTA中的，在一般的网页中一般不使用。
dialogHide:{yes|no|1|0|on|off}：在打印或者打印预览时对话框是否隐藏。默认为no。
edge:{sunken|raised}：指明对话框的边框样式。默认为raised。
unadorned:{yes|no|1|0|on|off}：默认为no。

4. ブラウザの互換性
ただし、すべてのブラウザがこの使用法に対応しているわけではありません。
上記の例を Chrome で実行すると、親ウィンドウは任意にフォーカスを取得でき、その効果は window.open と同じで、取得される returnVale も未定義です。
これのサポート状況は次のとおりです。主要なブラウザでの方法です。

浏览器	是否支持	状态
IE9	○
Firefox13.0	○
safari5.1	○
chrome19.0	×	并不是模态对话框，而是open了一个新窗体
Opera12.0	×	什么也发生，连个窗体都不弹

渡されたパラメータ vArguments が window の場合:

コードをコピーしますコードは次のとおりです:

var ret = window.showModalDialog("sub.html?temp=" Math.random(),window);

则在子窗口中，以下的值为：

浏览器	模态对话框	window.opener	window.dialogArguments	returnValue
IE9	○	undefined	[object Window]	○
Firefox13.0	○	[objectWindow]	[object Window]	○
safari5.1	○	[objectWindow]	[object Window]	○
クローム19.0	×	[オブジェクトウィンドウ]	未定義	×

Firefox ブラウザでは、サブフォームが更新されても、window.dialogArguments は失われ、未定義になることに注意してください。上記の結果から、戻り値 returnValue は Chrome ブラウザでのみ undefine として返され、他のブラウザでは問題ないことがわかります

5. Chrome の互換性の問題を解決する方法。
方向は次のとおりです: set window.opener.returnValue=""
main.html

コードをコピーコードは次のとおりです:

🎜><script> function showmodal() { var ret = window.showModalDialog("sub.html?temp=" Math.random(),window); //Chrome の場合 if(ret==unknown) { ret = window.returnValue ; } alert("sub 戻り値は " ret); } </script>

sub.html

コードをコピーします

コードは次のとおりです: 🎜>

function returnMain()

{
 if(window.opener!=unknown)
 {
 ウィンドウ.opener.returnValue = "サブから戻る"; 
 }else{ 
 window.returnValue = "サブから戻る";
 }
 window.close();
}
 
< INPUT id=button1 type=button value="戻って閉じる" name=button1 onclick="returnMain()"> ; 

ここでは、ブラウザを区別するために特定のオブジェクトが定義されているかどうかを判断します。もちろん、ブラウザの種類を決定することもできます 

親ウィンドウの returnValue がここで借用されます。親ウィンドウの returnValue が他の目的にも使用されている場合は、次のように置き換えることができます。 newValue = showModalDialog()
window.returnValue = oldValue 

6. Chrome でのテストでは、HTML ファイルを Web サーバー (Tomcat など) に配置し、http URL を通じてテストにアクセスする必要があることに注意してください。そうしないと成功しません。