>  기사  >  웹 프론트엔드  >  window.showModalDialog() return value_javascript 기술 학습 경험 요약

window.showModalDialog() return value_javascript 기술 학습 경험 요약

WBOY
WBOY원래의
2016-05-16 17:04:571010검색

먼저 window.showModalDialog의 기본 사용법부터 살펴보겠습니다

showModalDialog()(IE 4에서 지원)
showModelessDialog()(IE 5에서 지원)
window.showModalDialog() 메서드는 HTML 콘텐츠를 표시하는 모달 대화 상자를 만드는 데 사용됩니다.
window.showModelessDialog() 메서드는 HTML 콘텐츠를 표시하는 비모달 대화 상자를 만드는 데 사용됩니다.

사용법:
vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures])
vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures])

매개변수 설명:
sURL--필수 매개변수, 유형: 문자열. 대화 상자에 표시할 문서의 URL을 지정하는 데 사용됩니다.

vArguments--선택적 매개변수, 유형: 변형. 대화 상자에 매개변수를 전달하는 데 사용됩니다. 배열 등을 포함하여 전달되는 매개변수 유형은 제한되지 않습니다. 대화 상자는 window.dialogArguments를 통해 전달된 매개변수를 가져옵니다.

sFeatures--선택적 매개변수, 유형: 문자열. 대화 상자의 모양과 기타 정보를 설명하는 데 사용되며 다음 중 하나 이상을 세미콜론 ";"으로 구분하여 사용할 수 있습니다.

1.dialogHeight:대화 상자의 높이는 100px 이상입니다. IE4에서는 대화 상자 높이 및 대화 상자 너비의 기본 단위가 em이고 IE5에서는 편의상 모달을 정의합니다. 모드 대화 상자 때 단위는 px를 사용합니다.
2.dialogWidth: 대화상자 너비.
3.dialogLeft: 화면 왼쪽으로부터의 거리입니다.
4.dialogTop: 화면과의 거리.
5.center: {yes | no | 0}: 창이 중앙에 있는지 여부는 기본값이지만 높이와 너비는 계속 지정할 수 있습니다.
6.help: {yes | no 1 | 0}: 도움말 버튼 표시 여부, 기본값은 yes입니다.
7.ressible: {예 | 아니요 1 | 0 } [IE5]: 크기를 조정할 수 있는지 여부. 기본값은 아니오입니다.
8.status: {yes | no 1 | 0} [IE5]: 상태 표시줄을 표시할지 여부입니다. 기본값은 yes[Modal] 또는 no[Modal]입니다.
9.scroll:{ yes | no | 0 | off }: 대화 상자에 스크롤 막대가 표시되는지 여부를 나타냅니다. 기본값은 예입니다.

다음 속성은 HTA에서 사용되며 일반적으로 일반 웹페이지에서는 사용되지 않습니다.
10.dialogHide:
{ yes | no | 1 | 0 | off }: 인쇄 또는 인쇄 미리보기 중에 대화 상자를 숨길지 여부입니다. 기본값은 아니오입니다.
11.edge:{ sunken raise }: 대화 상자의 테두리 스타일을 지정합니다. 기본값은 증가합니다.
12.unadorned:{ 예 | 아니요 1 | 끄기 }: 기본값은 아니요입니다.

매개변수 전달:
1. 매개변수를 대화 상자에 전달하려면 vArguments를 통해 전달됩니다. 유형에는 제한이 없습니다. 문자열 유형의 경우 최대 길이는 4096자입니다. 예를 들어, 객체를 전달할 수도 있습니다.

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

<script><br>var obj = new Object();<br>obj.name="ttop";<br>window.showModalDialog("test.htm",obj,"dialogWidth=200px;dialogHeight=100px" );<br> </script>
test.htm
<script><br>var obj = window.dialogArguments<br>alert("전달한 매개변수는 " obj.name)<br></ script><br> </div> <br>2. window.returnValue를 사용하여 대화 상자가 열린 창에 정보를 반환할 수도 있고, 물론 객체일 수도 있습니다. 예: <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="64276" class="copybut" id="copybut64276" onclick="doCopy('code64276')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code64276"> <br><script><br>str =window .showModalDialog("test.htm",,"dialogWidth=200px;dialogHeight=100px");<br>alert(str);<br></script>
test.htm
<script> <br>window.returnValue="/";<br></script>

1. showModalDialog와 showModelessDialog의 차이점은 무엇인가요?

showModalDialog: 열린 후에는 입력 포커스가 항상 유지됩니다. 대화 상자를 닫지 않으면 사용자는 기본 창으로 전환할 수 없습니다. 경보의 작동 효과와 유사합니다.

showModelessDialog: 열린 후 사용자는 입력 포커스를 무작위로 전환할 수 있습니다. 메인창에는 아무런 영향을 끼치지 않습니다.(기껏해야 한동안 차단되어 있습니다. :P)

2. showModalDialog 및 showModelessDialog의 하이퍼링크가 새 창에 표시되는 것을 방지하는 방법은 무엇입니까?

열린 웹페이지에 를 추가하세요. 이 문장은 일반적으로 과 사이에 배치됩니다.

3. showModalDialog 및 showModelessDialog의 콘텐츠를 새로 고치는 방법은 무엇입니까?

showModalDialog 및 showModelessDialog에서는 F5를 눌러 새로 고칠 수 없으며 메뉴가 팝업되지 않습니다. 이는 javascript에만 의존할 수 있습니다. 관련 코드는 다음과 같습니다.


새로고침...

filename.htm을 웹페이지 이름으로 바꾸고 F5 키를 눌러 새로 고치세요. 그렇지 않으면 와 함께 사용해야 합니다. F5를 누르면 새창이 뜹니다.

4. javascript를 사용하여 showModalDialog(또는 showModelessDialog)로 열린 창을 닫는 방법.

또한 와 협력하세요. 그렇지 않으면 새 IE 창이 열렸다가 닫힙니다.

5. showModalDialog 및 showModelessDialog의 데이터 전송 기술.
(작가노트: 원래는 문답형식으로 쓰고 싶었는데 어떻게 물어봐야 할지 몰라서 이렇게 하게 되었습니다.)

이건 꽤 번거로운 일인데 몇 번이나 바꿔서 설명을 못 하는 게 아니라(언어 실력이 점점 안 좋아지고 있어요) 예를 들어 설명해야겠습니다.

예: 이제 showModalDialog(또는 showModelessDialog)에서 var_name

변수를 읽거나 설정해야 합니다.

일반 전달 방법:
window.showModalDialog("filename.htm",var_name)
//var_name 변수 전달
showModalDialog(또는 showModelessDialog)에서 읽고 설정하는 경우 :
alert(window.dialogArguments)//var_name 변수 읽기
window.dialogArguments="oyiboy"//var_name 변수 설정
이 방법은 만족스럽지만 var_name을 조작하려는 경우는 어떻습니까? 두 번째 변형 var_id가 동시에 작동합니까? 더 이상 운영할 수 없습니다. 이것이 이 배송 방법의 한계입니다.
 
제가 추천하는 전달 방법은 다음과 같습니다.
window.showModalDialog("filename.htm",window)
//어떤 변수를 조작하든 관계없이, 그냥 직접 전달하세요. 기본 창의 창 개체
를 showModalDialog(또는 showModelessDialog)로 읽고 설정한 경우:
alert(window.dialogArguments.var_name)//var_name 변수 읽기
window.dialogArguments. var_name="oyiboy"/ /var_name 변수 설정

동시에 var_id 변수도 조작할 수 있습니다
alert(window.dialogArguments.var_id)//var_id 변수 읽기
window.dialogArguments.var_id="001" //var_id 변수 설정

양식 개체의 요소 등 기본 창의 모든 개체에 대해 작업을 수행할 수도 있습니다.
window.dialogArguments.form1.index1.value="index1 요소의 값을 설정하는 것입니다."

상위 페이지에서 onClick=""var reVal = window.showModalDialog('changephoto.htm','dialogWidth:500px;dialogHeight:300px;help:no' 사용 );if (typeof(reVal) != 'undefine') {form.textname.value=reVal;}"" cursor:hand "">이미지를 수정하려면 여기를 클릭하세요

'changephoto.htm'이라는 단어 창에서 프레임세트를 엽니다. 프레임세트에는 ASP 파일이 포함되어 있습니다. 먼저 ASP 값을 Changephoto.htm에 반환한 다음 이 값을 기본 페이지에 반환합니다.

changephoto.htm:

function onClose() { window.returnValue = form1.save.value;//window.returnValue를 window.dialogArguments.oblogform.blogimage.value window.close()로 변경할 수도 있습니다. }

asp 파일: parent.document.form1.save.value="값 또는 변수";

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.