showModalDialog 모달 대화 상자 및 브라우저 호환성_javascript 기술 사용에 대한 자세한 설명-JS 튜토리얼-php.cn

1.ModalDialog란 무엇인가요?
showModalDialog는 jswindow 객체의 메소드로 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가 크롬 브라우저에서만 정의되지 않은 상태로 반환되고, 다른 브라우저에서는 문제가 없음을 알 수 있습니다

5. Chrome 호환성 문제를 해결하는 방법.
방향은 다음과 같습니다. set window.opener.returnValue=""
main.html

코드 복사 코드는 다음과 같습니다.

🎜>

저자별 최신 기사