บทความนี้สรุปวิธีการป๊อปอัพ JavaScript ที่ใช้กันทั่วไปสำหรับการเปรียบเทียบและการอ้างอิงของคุณ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ วิธีการโดยละเอียดมีดังนี้:
1. รีเฟรชหน้าเว็บอย่างเงียบ ๆ :
คุณสังเกตเห็นว่าเมื่อมีการรีเฟรชเว็บเพจบางหน้าหน้าต่างพรอมต์จะปรากฏขึ้นและคลิก "ตกลง" เพื่อรีเฟรช
บางหน้าจะไม่ได้รับแจ้งและหน้าต่างพรอมต์จะถูกรีเฟรชโดยตรงโดยไม่ต้องโผล่ขึ้นมา
หากหน้าไม่มีแบบฟอร์ม
หน้าต่างพรอมต์จะไม่ปรากฏขึ้น
หากหน้ามีแบบฟอร์ม
a) <รูปแบบวิธี = "โพสต์" ... >
หน้าต่างพรอมต์จะปรากฏขึ้น
b) <วิธีการฟอร์ม = "รับ" ... >
จะไม่ปรากฏขึ้น
2. วิธีรีเฟรชหน้าใน JavaScript:
window.location.reload ();
ใช้หน้าต่างป๊อปอัพป๊อปอัพเพื่อรีเฟรชหน้าต่างพาเรนต์
window.opener.location.reload ()
โหมดหน้าต่างป๊อปอัพโดยใช้ window.showdialog
window.dialogarguments.location.reload ();
3. JavaScript Popup Window Code:
window.open () วิธีการ:
window.open () รองรับสภาพแวดล้อม: JavaScript1.0+/jscript1.0+/nav2+/ie3+/opera3+
ไวยากรณ์พื้นฐาน:
window.open (หน้าเว็บ, ชื่อ, พารามิเตอร์)
ใน:
PageUrl เป็นเส้นทางหน้าต่างลูก
ชื่อคือที่จับหน้าต่างเด็ก
พารามิเตอร์คือพารามิเตอร์หน้าต่าง (แต่ละพารามิเตอร์จะถูกคั่นด้วยเครื่องหมายจุลภาค)
ตัวอย่าง:
<script> <!-window.open ('page.html', 'newWindow', 'ความสูง = 100, ความกว้าง = 400, top = 0, ซ้าย = 0, แท็กเครื่องมือ = ไม่, menubar = ไม่, scrollbars = ไม่, resizable = no, location = no, สถานะ = ไม่') // เขียนเป็นบรรทัดเดียว->หลังจากเรียกใช้สคริปต์แล้ว page.html จะเปิดในรูปแบบใหม่ Newwindow ด้วยความกว้าง 100 ความสูง 400, 0 พิกเซลจากด้านบนของหน้าจอ, 0 พิกเซลจากด้านซ้ายของหน้าจอไม่มีแถบเครื่องมือไม่มีแถบเมนูไม่มีแถบเลื่อนไม่มีแถบที่อยู่และไม่มีแถบสถานะ
กรุณาเปรียบเทียบ
ตัวอย่างข้างต้นเป็นพารามิเตอร์ที่ใช้กันทั่วไปหลายประการและมีพารามิเตอร์อื่น ๆ อีกมากมายนอกเหนือจากนี้โปรดดู 4
พารามิเตอร์ต่างๆ
ในหมู่พวกเขาใช่/ไม่สามารถใช้ 1/0; ค่าพิกเซลคือค่าเฉพาะหน่วยพิกเซล
พารามิเตอร์ ช่วงค่า คำอธิบาย
- -
เสมอ ใช่/ไม่ใช่ | หน้าต่างที่ระบุจะถูกซ่อนอยู่หลังหน้าต่างทั้งหมด
เสมอ ใช่/ไม่ใช่ | ระบุ windows ที่แขวนอยู่เหนือ Windows ทั้งหมด
ขึ้นอยู่กับ | ใช่/ไม่ใช่ | ไม่ว่าจะปิดหน้าต่างหลักในเวลาเดียวกัน
ไดเรกทอรี ใช่/ไม่ใช่ | คอลัมน์ไดเรกทอรีของ NAV2 และ 3 มองเห็นได้
ความสูง | ค่าพิกเซล | ความสูงของหน้าต่าง
Hotkeys | ใช่/ไม่ใช่ | ตั้งค่าฮอตคีย์ทางออกอย่างปลอดภัยในหน้าต่างโดยไม่มีแถบเมนู
InnerHeight | ค่าพิกเซล | ความสูงพิกเซลของเอกสารในหน้าต่าง
InnerWidth | ค่าพิกเซล | ความกว้างพิกเซลของเอกสารในหน้าต่าง
ที่ตั้ง | ใช่/ไม่ใช่ | เป็นแถบที่ตั้งที่มองเห็นได้หรือไม่
Menubar ใช่/ไม่ใช่ | เป็นแถบเมนูที่มองเห็นได้หรือไม่
Outerheight | ค่าพิกเซล | ตั้งค่าพิกเซลความสูงของหน้าต่าง (รวมถึงเส้นขอบตกแต่ง)
Outerwidth | ค่าพิกเซล | ตั้งค่าความกว้างพิกเซลของหน้าต่าง (รวมถึงเส้นขอบตกแต่ง)
ปรับขนาดได้ ใช่/ไม่ใช่ | ขนาดหน้าต่างปรับขนาดได้หรือไม่
ScreenX | ค่าพิกเซล | ความยาวพิกเซลของหน้าต่างไปยังขอบด้านซ้ายของหน้าจอ
หน้าจอ | ค่าพิกเซล | ความยาวพิกเซลของหน้าต่างไปยังขอบเขตบนของหน้าจอ
แถบเลื่อน ใช่/ไม่ใช่ | มีแถบเลื่อนที่หน้าต่างหรือไม่
TITLEBAR ใช่/ไม่ใช่ | เป็นคอลัมน์ชื่อหน้าต่างที่มองเห็นได้หรือไม่
แถบเครื่องมือ ใช่/ไม่ใช่ | เป็นแถบเครื่องมือหน้าต่างที่มองเห็นได้หรือไม่
ความกว้าง ค่าพิกเซล | พิกเซลความกว้างของหน้าต่าง
Z-Look | ใช่/ไม่ใช่ | ไม่ว่าหน้าต่างจะลอยอยู่บนหน้าต่างอื่น ๆ หรือไม่หลังจากเปิดใช้งาน
ฟังก์ชั่น showdialog (url) {var iwidth = 300; // ความกว้างของหน้าต่าง var iheight = 200; // ความสูงของหน้าต่าง var itop = (window.screen.height-heeight)/2; var ileft = (window.screen.width-iwidth)/2; window.open (url, "รายละเอียด", "scrollbars = no, toolbar = ไม่, ตำแหน่ง = ไม่, ทิศทาง = ไม่, resizable = no, width ="+iwidth+", ความสูง ="+iheight+", top ="+itop+", ซ้าย ="+ileft); -Window.ShowModaldialog วิธี:
คำแนะนำพื้นฐาน:
showmodaldialog () (เช่นการสนับสนุน 4+)
showmodelessDialog () (เช่น 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 หน่วยเริ่มต้นของ Dialogheight และ Dialogwidth ใน IE4 คือ EM และ PX ใน IE5 เพื่อความสะดวกเมื่อกำหนดกล่องโต้ตอบในวิธีการโมดอล PX จะถูกใช้เป็นหน่วย
2.dialogwidth: กล่องโต้ตอบความกว้าง
3.DialogLeft: ระยะทางจากด้านซ้ายของหน้าจอ
4.dialogtop: ระยะทางจากหน้าจอ
5. Center: {ใช่ | ไม่ | 1 | 0}: ไม่ว่าจะเป็นหน้าต่างอยู่กึ่งกลางหรือไม่ แต่คุณยังสามารถระบุความสูงและความกว้างได้
6.Help: {ใช่ | ไม่ | 1 | 0}: ไม่ว่าจะแสดงปุ่มช่วยเหลือหรือไม่ค่าเริ่มต้นคือใช่
7. Resizable: {ใช่ | ไม่ | 1 | 0} [IE5+]: ขนาดสามารถเปลี่ยนแปลงได้หรือไม่ หมายเลขเริ่มต้น
8. Status: {ใช่ | ไม่ | 1 | 0} [IE5+]: จะแสดงแถบสถานะหรือไม่ ค่าเริ่มต้นเป็นใช่ [modeless] หรือไม่มี [modal]
9.Scroll: {ใช่ | ไม่ | 1 | 0 | บน | ปิด}: ระบุว่ากล่องโต้ตอบแสดงแถบเลื่อนหรือไม่ ค่าเริ่มต้นคือใช่
คุณลักษณะต่อไปนี้ใช้ใน HTA และโดยทั่วไปจะไม่ใช้ในหน้าเว็บทั่วไป
10.dialoghide: {ใช่ | ไม่ | 1 | 0 | บน | ปิด}: ไม่ว่าจะเป็นกล่องโต้ตอบเมื่อซ่อนหรือพิมพ์ตัวอย่าง ค่าเริ่มต้นคือไม่
11.edge: {Sunken | ยกขึ้น}: ระบุสไตล์เส้นขอบของกล่องโต้ตอบ ค่าเริ่มต้นจะถูกยกขึ้น
12.Unadorned: {ใช่ | ไม่ | 1 | 0 | บน | ปิด}: ค่าเริ่มต้นคือไม่
พารามิเตอร์ผ่าน:
(1). หากคุณต้องการส่งพารามิเตอร์ในกล่องโต้ตอบมันจะถูกส่งผ่าน Varguments ไม่มีข้อ จำกัด เกี่ยวกับประเภทสำหรับประเภทสตริงสูงสุดคือ 4096 อักขระ วัตถุสามารถผ่านได้เช่น:
-
parent.htm หน้า:
<script> var obj = วัตถุใหม่ (); obj.name = "JB51"; window.showModaldialog ("modal.htm", obj, "dialogwidth = 200px; dialogheight = 100px"); </script>modal.htm หน้า:
<script> var obj = window.dialogargementsalet ("พารามิเตอร์ที่คุณผ่านคือ:" + obj.name) </script>(2) คุณสามารถส่งคืนข้อมูลไปยังหน้าต่างที่เปิดกล่องโต้ตอบผ่านหน้าต่างการกลับมาและแน่นอนว่ามันสามารถเป็นวัตถุได้ ตัวอย่างเช่น:
parent.htm รหัสหน้า:
<script> str = window.showmodaldialog ("modal.htm" ,, "dialogwidth = 200px; dialogheight = 100px"); แจ้งเตือน (str); </script> modal.htm <Script> window.ReturnValue = "http://ww.jb51.com;ตัวอย่าง:
ฟังก์ชั่น showdialog (url) {var iwidth = 300; // ความกว้างของหน้าต่าง var iheight = 200; // ความสูงของหน้าต่าง var itop = (window.screen.height-heeight)/2; var ileft = (window.screen.width-iwidth)/2; window.showmodaldialog (URL, Window, "Dialogheight:"+iHeight+"PX; DialogWidth:"+iWidth+"PX; Dialogtop:"+Itop+"; Dialogleft:"+Ileft+"; -หมายเหตุพารามิเตอร์ที่สองที่นี่หน้าต่าง
4. ปัญหาของการไม่รีเฟรชข้อมูลหน้าต่างโหมด (แคช)
เพิ่มคำสั่งต่อไปนี้ในหน้า JSP
<% การตอบสนอง setheader ("pragma", "ไม่มีแคช"); Response.Setheader ("แคชควบคุม", "ไม่มีแคช"); Response.setDateHeader ("หมดอายุ", 0);%>5. ในหน้าต่างโหมดลิงค์จะปรากฏปัญหาหน้าต่างใหม่:
◎ _blank เปิดไฟล์ลิงค์ในหน้าต่างเบราว์เซอร์ใหม่
◎ _parent โหลดไฟล์ที่เชื่อมโยงลงในชุดเฟรมแม่หรือหน้าต่างพาเรนต์ที่มีเฟรมลิงค์ หากเฟรมเวิร์กที่มีลิงก์ไม่ซ้อนกันไฟล์ที่เชื่อมโยงจะถูกโหลดในหน้าต่างหน้าจอเต็มเบราว์เซอร์เช่นเดียวกับพารามิเตอร์ _self
◎ _self เปิดเอกสารที่เชื่อมโยงในเฟรมหรือหน้าต่างเดียวกัน พารามิเตอร์นี้เป็นค่าเริ่มต้นและมักจะไม่ได้ระบุ
◎ _top เปิดเอกสารที่เชื่อมโยงในหน้าต่างเบราว์เซอร์ปัจจุบันทั้งหมดดังนั้นการลบเฟรมทั้งหมด
เพิ่ม <a href = "a.html" target = "_ blank"/> ระหว่าง </head> และ <body>
6. วิธีปิดหน้าอย่างเงียบ ๆ :
ฟังก์ชั่น closewin () {var ua = navigator.useragent; var ie = navigator.appname == "Microsoft Internet Explorer"? true: false; if (เช่น) {var ieversion = parsefloat (ua.substring (ua.indexof ("msie")+5, ua.indexof (";", ua.indexof ("msie"))))); if (ieversion <5.5) {var str = ''; document.body.insertadjacenthtml ("beforend", str); document.all.notipclose.click (); } else {window.opener = null; window.close (); }} else {window.close ()}}ผู้อ่านที่สนใจสามารถดีบักวิธีการข้างต้นซึ่งฉันเชื่อว่าจะนำแรงบันดาลใจและช่วยเหลือทุกคน