프로젝트에서 흔히 발생하는 상황은 사례목록 등의 목록이 있고, 목록에 있는 항목을 클릭하면 상세페이지로 이동하는 경우입니다. 사례 및 특정 세부 사항 페이지는 나중에 사용자가 추가하기 때문에 클릭한 기록을 기반으로 세부 사항이 생성됩니다. 따라서 페이지로 이동할 때 이 매개변수를 통해 데이터 요청을 할 수 있도록 매개변수를 전달해야 하며, 백그라운드에서 반환된 데이터를 기반으로 페이지를 생성해야 합니다. 따라서 a 태그를 통해 점프하는 것은 확실히 작동하지 않습니다.
우리는 종종 양식을 제출할 때 매개변수를 전달하여 양식을 숨기면 효과를 얻을 수 있습니다.
또한 window.location.href 및 window.open도 효과를 얻을 수 있습니다.
1. 양식을 통해 매개변수 전달 <html lang=en> <head> <!--웹사이트 인코딩 형식, UTF-8 국제 인코딩, GBK 또는 gb2312 중국어 인코딩--> <meta http-equiv=content-type content=text/html;charset=utf- 8 /> <meta name=키워드 내용=키워드 1, 키워드 2> <meta name=설명 내용=웹사이트 설명 내용> <meta name=저자 내용=Yvette Lau> <title>문서</title> <!--CSS js 파일 소개--> <!-- <link rel=shortcut icon href=images/favicon.ico> --> <link rel=stylesheet href=/> <script type = text/javascript src = jquery-1.11.2.min.js></script> </head> <body> <form name = frm method = get action = receive.html onsubmit = return foo() 스타일 = 위치:상대적;> <입력 유형=숨겨진 이름=hid 값 = 인덱스 = 레몬> <img 클래스 = 더보기 src = main_jpg10.png /> <입력 유형 = 제출 스타일 = 위치:절대; 왼쪽:10px;위쪽:0px;너비:120px;높이:40px;불투명도:0;커서:포인터;/> </form> <양식 이름 = frm 메소드 = 작업 가져오기 = receive.html onsubmit = return foo() 스타일 = 위치:상대적;> <입력 유형=숨겨진 이름=hid 값 = 색인 = aaa> <img 클래스 = 추가 src = main_jpg10.png /> <입력 유형 = 제출 스타일 = position:absolute;left:10px;top:0px;width:120px;height:40px;opacity:0;cursor:pointer;/> </form> <form name = frm method = get action = receive.html onsubmit = return foo() 스타일 = 위치:상대적;> <입력 유형=숨겨진 이름=hid 값 = 인덱스 = bbb> <img 클래스 = 추가 src = main_jpg10.png /> <입력 유형 = 제출 스타일 = 위치:absolute;left:10px;top:0px;width:120px;height:40px;opacity:0;cursor:pointer;/> </form> </body> </html><script> 함수 foo(){ var frm = window.event.srcElement frm.hid.value = $(frm.hid).attr(index); true를 반환합니다. }</script>사진을 클릭하시면 receive.html 페이지로 이동합니다. 페이지의 URL은 다음과 같습니다:
전달하려는 문자열이 전달되었습니다.
그런 다음 현재 URL에서 문자열 분할을 수행합니다.
window.location.href.split(=)[1]//레몬 가져오기
전달해야 하는 매개변수를 얻은 후 이를 기반으로 다음 단계를 진행할 수 있습니다.
URL에 의해 전달된 매개변수를 얻기 위해 위에서 언급한 문자열 분할 외에도 정규 매칭 및 window.location.search 메소드를 통해 매개변수를 얻을 수도 있습니다.
2. window.location.href를 통해예를 들어, 목록을 클릭하면 Detail.html 페이지에 문자열을 전달해야 하며, 그러면 Detail.html 페이지는 전달된 값을 기반으로 Ajax 상호 작용 데이터를 통해 페이지의 콘텐츠를 로드합니다.
var index = 레몬; var url = receive.html?index=+index; $(#more).click(function(){ window.location.href = url; });현재 페이지는 receive.html 페이지로 대체되고 페이지 URL은 다음과 같습니다.
그런 다음 위의 방법을 사용하여 필요한 매개변수를 추출합니다.
3. window.location.open을 통해현재 페이지를 변경하는 대신 새 페이지를 열려면 window.location.href를 적용할 수 없습니다. 이때 window.location.open()을 사용해야 합니다.
window.open() 함수에 대한 간략한 소개입니다. window.open()에는 세 가지 매개변수가 있습니다. 첫 번째 매개변수는 열려는 페이지의 URL이고 세 번째 매개변수는 특정 문자열입니다. 새 페이지가 브라우저 기록에 현재 로드된 페이지를 대체하는지 여부를 나타내는 부울 값입니다. 첫 번째 매개변수만 전달하면 됩니다. 두 번째 매개변수는 _blank, _self, _parent, _top과 같은 특수 창 이름일 수도 있습니다. _blank는 새 창을 열고 _self는 window.location.href와 동일한 효과를 얻습니다.
위의 예를 계속하면 다음과 같습니다.
<script> var index = 레몬; var url = receive.html?index=+index; $(#more).click(function(){ window.open(url) });</script>이런 식으로 클릭하면 위와 동일한 URL 주소로 새 페이지가 열립니다.
브라우저 보안 제한으로 인해 일부 브라우저에는 팝업 창 구성에 제한이 추가됩니다. 대부분의 브라우저에는 팝업 창 차단 프로그램이 내장되어 있으므로 팝업 창이 차단되면 두 가지가 있습니다. 한 가지 가능성은 브라우저에 내장된 차단 프로그램이 팝업 창을 차단하므로 window.open()이 Null을 반환할 가능성이 있다는 점입니다. 이때 팝업 창이 차단되었는지 여부를 확인할 수 있습니다. 반환된 값을 모니터링하여
var newWin = window.open(url);if(newWin == null){ 경고(팝업 차단);}다른 하나는 브라우저 확장 프로그램이나 다른 프로그램에 의해 팝업 창이 차단된 경우입니다. 그러면 window.open()에서는 일반적으로 오류가 발생하므로 팝업 창이 차단되었는지 정확하게 감지하려면 반환 값을 감지해야 합니다. 동시에 window.open()은 try-catch 블록에 캡슐화됩니다. 위 예에서는 다음과 같이 작성할 수 있습니다.
<script> var Blocked = false; try{ var index = 레몬; var url = receive.html?index=+index(){ var newWin = window.open(url); (newWin == null){ Blocked = true; } }); catch(ex){ block = true; } if(blocked){ 경고(팝업 창이 차단됨) } </script>위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.