สถานการณ์ที่มักเกิดขึ้นในโปรเจ็กต์คือมีรายการ เช่น รายการเคส และการคลิกที่รายการในรายการจะข้ามไปยังหน้ารายละเอียด รายละเอียดจะถูกสร้างขึ้นตามเรกคอร์ดที่คลิก เนื่องจากผู้ใช้เพิ่มกรณีและปัญหาและหน้ารายละเอียดเฉพาะในภายหลัง เมื่อเราเริ่มเขียน เป็นไปไม่ได้ที่จะทำทุกอย่างให้หมด ดังนั้น เมื่อข้ามไปที่เพจ เราจำเป็นต้องส่งพารามิเตอร์เพื่อที่เราจะสามารถทำการร้องขอข้อมูลผ่านพารามิเตอร์นี้ จากนั้นจึงสร้างเพจตามข้อมูลที่ส่งกลับโดยพื้นหลัง ดังนั้นการข้ามแท็กจะไม่ทำงานอย่างแน่นอน
เรามักจะเขียนแบบฟอร์ม เมื่อส่ง เราสามารถส่งพารามิเตอร์ได้ หากเราใช้แบบฟอร์มและซ่อนไว้ ก็จะได้ผลลัพธ์
นอกจากนี้ 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=เนื้อหาคำหลัก=คำหลักหนึ่ง คำหลักที่สอง> <meta name=เนื้อหาคำอธิบาย=เนื้อหาคำอธิบายเว็บไซต์> <meta name=เนื้อหาผู้เขียน=Yvette Lau> <title>เอกสาร</title> <!--แนะนำไฟล์ css js--> <!-- <link rel=ไอคอนทางลัด href=images/favicon.ico> --> <link rel=stylesheet href=/> <ประเภทสคริปต์ = ข้อความ / javascript src = jquery-1.11.2.min.js></script> </head> <body> <ชื่อแบบฟอร์ม = frm วิธี = รับการกระทำ = รับ.html onsubmit = return foo() style = ตำแหน่ง: ญาติ;> <ประเภทอินพุต = ชื่อที่ซ่อนอยู่ = ค่า hid = ดัชนี = มะนาว> <img class = เพิ่มเติม src = main_jpg10.png /> <ประเภทอินพุต = ส่งสไตล์ = ตำแหน่ง: สัมบูรณ์; ซ้าย:10px;ด้านบน:0px;ความกว้าง:120px;ความสูง:40px;ความทึบ:0;เคอร์เซอร์:ตัวชี้;/> </แบบฟอร์ม> <ชื่อฟอร์ม = วิธีการ frm = รับการกระทำ = รับ.html onsubmit = กลับ foo() style = ตำแหน่ง: ญาติ;> <ประเภทอินพุต = ชื่อที่ซ่อนอยู่ = ค่า hid = ดัชนี = aaa> <img class = เพิ่มเติม src = main_jpg10.png /> <ประเภทอินพุต = ส่งสไตล์ = ตำแหน่ง: สัมบูรณ์; ซ้าย: 10px; top: 0px; ความกว้าง: 120px; ความสูง: 40px; ความทึบ: 0; เคอร์เซอร์: ตัวชี้;/> </form> <ชื่อฟอร์ม = frm method = รับการกระทำ = รับ.html onsubmit = กลับ foo() style = ตำแหน่ง: ญาติ;> <ประเภทอินพุต = ชื่อที่ซ่อนอยู่ = ค่า hid = ดัชนี = bbb> <img class = เพิ่มเติม src = main_jpg10.png /> <ประเภทอินพุต = ส่งสไตล์ = ตำแหน่ง: สัมบูรณ์; ซ้าย: 10px; ด้านบน: 0px; ความกว้าง: 120px; ความสูง: 40px; ความทึบ: 0; เคอร์เซอร์: ตัวชี้; /> </ รูปแบบ> </body> </html><script> ฟังก์ชั่น foo(){ var frm = window.event.srcElement; frm.hid.value = $(frm.hid).attr(index); ส่งคืนจริง;เมื่อคลิกที่ภาพ มันจะข้ามไปที่หน้า gets.html URL ของหน้ากลายเป็น:
สตริงที่เราต้องการส่งผ่านไปแล้ว
จากนั้นทำการแยกสตริงบน URL ปัจจุบัน
window.location.href.split(=)[1]//รับมะนาว
หลังจากที่เราได้รับพารามิเตอร์ที่ต้องส่งแล้ว เราก็สามารถดำเนินการขั้นตอนต่อไปตามนี้ได้
นอกเหนือจากการแยกสตริงที่กล่าวถึงข้างต้นเพื่อรับพารามิเตอร์ที่ส่งผ่านโดย URL แล้ว เรายังสามารถรับพารามิเตอร์เหล่านั้นผ่านการจับคู่ปกติและวิธี window.location.search
2. ผ่าน window.location.hrefตัวอย่างเช่น เมื่อเราคลิกที่รายการ เราจำเป็นต้องส่งสตริงไปยังหน้า detail.html จากนั้นหน้า detail.html จะโหลดเนื้อหาของหน้าผ่านข้อมูลการโต้ตอบ Ajax ตามค่าที่ส่ง
ดัชนี var = มะนาว; var url = รับ.html?index=+index; $(#more).click(function(){ window.location.href = url; });หน้าปัจจุบันจะถูกแทนที่ด้วยหน้า recieve.html และ URL ของหน้าจะกลายเป็น:
จากนั้นเราใช้วิธีการด้านบนเพื่อแยกพารามิเตอร์ที่เราต้องการ
3. ผ่าน window.location.openหากคุณต้องการเปิดหน้าใหม่แทนที่จะเปลี่ยนหน้าปัจจุบัน window.location.href จะไม่สามารถใช้งานได้ ในขณะนี้ เราจำเป็นต้องใช้ window.location.open() เพื่อให้บรรลุผล
การแนะนำฟังก์ชัน window.open() โดยย่อ window.open() มีพารามิเตอร์สามตัวคือ URL ของเพจที่จะเปิด ค่าบูลีนที่ระบุว่าเพจใหม่จะแทนที่เพจที่โหลดในปัจจุบันในประวัติของเบราว์เซอร์หรือไม่ ต้องส่งเฉพาะพารามิเตอร์แรกเท่านั้น พารามิเตอร์ที่สองอาจเป็นชื่อหน้าต่างพิเศษ เช่น _blank, _self, _parent, _top
ดำเนินการต่อด้วยตัวอย่างข้างต้น:
<script> var index = lemon; var url = gets.html?index=+index; $(#more).click(function(){ window.open(url) });</script>ด้วยวิธีนี้ เมื่อคลิกแล้ว หน้าใหม่จะเปิดขึ้นพร้อมที่อยู่ URL เดียวกันกับด้านบน
เนื่องจากข้อจำกัดด้านความปลอดภัยของเบราว์เซอร์ เบราว์เซอร์บางตัวจึงเพิ่มข้อจำกัดในการกำหนดค่าหน้าต่างป๊อปอัป เบราว์เซอร์ส่วนใหญ่มีโปรแกรมบล็อกหน้าต่างป๊อปอัปในตัว ดังนั้น หน้าต่างป๊อปอัปอาจถูกบล็อก สองสิ่ง จำเป็นต้องพิจารณา ความเป็นไปได้ประการหนึ่งคือโปรแกรมบล็อกในตัวของเบราว์เซอร์จะบล็อกหน้าต่างป๊อปอัป ดังนั้น window.open() จึงมีแนวโน้มที่จะส่งคืนค่า Null ในขณะนี้ คุณสามารถระบุได้ว่าหน้าต่างป๊อปอัปถูกบล็อกหรือไม่ โดยการตรวจสอบค่าที่ส่งคืน
var newWin = window.open(url);if(newWin == null){ alert(ป๊อปอัปถูกบล็อก);}อีกอันคือหน้าต่างป๊อปอัปที่ถูกบล็อกโดยส่วนขยายเบราว์เซอร์หรือโปรแกรมอื่น จากนั้น window.open() มักจะแสดงข้อผิดพลาด ดังนั้น เพื่อตรวจจับได้อย่างแม่นยำว่าหน้าต่างป๊อปอัปถูกบล็อกหรือไม่ คุณต้องตรวจจับค่าที่ส่งคืนและที่ ในเวลาเดียวกัน window.open() จะถูกห่อหุ้มไว้ในบล็อก try-catch ในตัวอย่างข้างต้น สามารถเขียนได้ดังนี้:
<script> var blocked = false; try{ var index = lemon; var url = gets.html?index=+index; $(#more).click(function(){ var newWin = window.open(url); ถ้า (newWin == null){ blocked = true; } }); } catch(ex){ block = true; } if(blocked){ alert(หน้าต่างป๊อปอัปถูกบล็อก);ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network