> 웹 프론트엔드 > JS 튜토리얼 > window.open은 post mode_javascript 기술의 새 창에 콘텐츠를 제출합니다.

window.open은 post mode_javascript 기술의 새 창에 콘텐츠를 제출합니다.

WBOY
풀어 주다: 2016-05-16 17:45:28
원래의
1196명이 탐색했습니다.
첫 번째 방법
최근에 웹 프로젝트를 진행하다가 페이지 간에 매개변수를 전달해야 하는 기능을 발견했습니다. 이 기능을 사용하려면 현재 페이지의 콘텐츠를 새로 열린 하위 양식으로 가져와야 했습니다. ID를 전달한 다음 새 창에서 데이터베이스의 내용을 읽는 것입니다. 크게 번거롭지는 않지만 콘텐츠가 데이터베이스에 저장되지 않고 초안 상태로만 있을 경우 구현할 수 없으며, 사용자들은 이를 버그라고 생각하는 경우가 많다. get 메소드를 사용하여 전송하고 필요한 모든 컨텐츠를 직렬화한 다음 URL을 통해 전송하는 것을 고려하십시오. 이는 매우 부풀어오르고 get을 통해 전송되는 컨텐츠의 길이가 제한됩니다. 그래서 게시 방식을 이용해서 전달하려고 생각하게 되었습니다. 문제는 공개 방식에서는 요청 방식을 설정할 수 없다는 점입니다. 일반적으로 웹 페이지의 게시물은 폼을 통해 구현됩니다. 폼의 제출 방법만 시뮬레이션하는 경우에는 폼 속성을 설정할 수 있는 open 메서드의 매개 변수를 사용할 수 없습니다. 결국 둘을 합칠 수 있는 방법을 찾았고, open의 name 매개변수와 동일한 값으로 form의 대상을 설정하고, 브라우저의 자동 인식을 통해 내용을 새 창에 게시했습니다.

더 흥미로운 점은 양식의 제출 메소드를 호출하여 onsubmit 이벤트를 직접 실행할 수 없다는 점입니다. 도움말 문서를 본 후에는 수동으로 실행해야 합니다. 그렇지 않으면 페이지가 열리지 않고 새로 고쳐지는 것만 볼 수 있습니다. 새 창. 코드에서는 하나의 매개변수 콘텐츠만 전달되지만 실제로는 여러 매개변수가 전달될 수 있습니다.
구체적인 코드는 다음과 같습니다.
코드 복사 코드는 다음과 같습니다.

<script> <br>function openPostWindow(url, data, name) <br>{ <br>var tempForm = document.createElement("form") <br>tempForm.id="tempForm1"; tempForm.method="post "; <br>tempForm.action=url; <br>tempForm.target=name; <br>var hideInput = document.createElement("input") <br>hideInput.type="hidden "; <br>hideInput .name= "content" <br>hideInput.value= data; <br>tempForm.appendChild(hideInput); <br>tempForm.attachEvent("onsubmit",function(){ openWindow(name) ; }); <br>document.body.appendChild(tempForm); <br>tempForm.fireEvent("onsubmit") <br>document.body.removeChild(tempForm); 🎜>} <br> 함수 openWindow(이름) <br>{ <br>window.open('about:blank',name,'height=400, width=400, top=0, left=0, 도구 모음=yes , 메뉴바=예, 스크롤바 =예, 크기 조정 가능=예, 위치=예, 상태=예') <br>} <br></script>



두 번째 방법


코드 복사 코드는 다음과 같습니다. function openWindowWithPost(url,name ,keys,values)
{
var newWindow = window.open(url, name);
if (!newWindow)
return false; html = "< ;head>
"
if (키 && 값)
{
html = ""
}
html = "
".toString() .replace(/^. ?*|\(?=/)|*. ?$/gi, "");
newWindow.document.write(html);
return newWindow;
}


두 번째 방법을 테스트하는 동안 달력 팝업 상자와 충돌하는 것으로 나타났습니다. 하위 페이지에 달력 팝업 상자가 있으며, 달력 상자를 클릭하면 페이지가 계속 새로 고쳐집니다. 물론, 제가 사용하고 있는 달력박스의 문제일 수도 있습니다.
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿