หน้าต่าง
วัตถุหน้าต่างไม่เพียง แต่ทำหน้าที่เป็นขอบเขตทั่วโลกเท่านั้น แต่ยังแสดงถึงหน้าต่างเบราว์เซอร์ด้วย
วัตถุหน้าต่างมีคุณสมบัติ InnerWidth และ InnerHeight ซึ่งสามารถรับความกว้างและความสูงภายในของหน้าต่างเบราว์เซอร์ ความกว้างและความสูงภายในอ้างถึงความกว้างและความสูงของสุทธิที่ใช้ในการแสดงหน้าเว็บหลังจากลบองค์ประกอบของตัวยึดเช่นแถบเมนูแถบเครื่องมือชายแดน ฯลฯ นอกจากนี้ยังมีคุณลักษณะ outerwidth และ outerheight ซึ่งสามารถรับความกว้างและความสูงทั้งหมดของหน้าต่างเบราว์เซอร์
เติมเต็ม:
ความกว้างของพื้นที่ที่มองเห็นได้ของหน้าเว็บ: document.body.clientwidth ความสูงของพื้นที่ที่มองเห็นได้ของหน้าเว็บ: document.body.clientheight ความกว้างของพื้นที่ที่มองเห็นได้ของหน้าเว็บ: document.offsetwidth (รวมถึงความกว้างของขอบและแถบเลื่อน) ความสูงของหน้าเว็บ document.body.scrollwidth ความสูงของข้อความเต็มของหน้าเว็บ: document.body.scrollheight ความสูงของหน้าเว็บที่กำลังเปิดตัว: document.body.scrolltop หรือ jQuery (เอกสาร). scrolltop () ด้านซ้ายของหน้าเว็บ window.screen.height ความกว้างความละเอียดของหน้าจอ: window.screen.width หน้าจอที่มีความสูงพื้นที่ทำงาน: window.screen.availheight หน้าจอที่มีความกว้างของพื้นที่ทำงาน: window.screen.availwidth สีหน้าจอ: หน้าต่างหน้าจอ $ (หน้าต่าง) .Height () ความกว้างของหน้าต่างเบราว์เซอร์: $ (หน้าต่าง) .Width ()
พิเศษ 1: โซลูชันสำหรับ document.body.scrolltop อยู่เสมอ 0 var scrollpos; if (typeof window.pageyoffset! = 'undefined') {scrollpos = window.pageyoffset; } อื่นถ้า (typeof document.CompatMode! = 'undefined' && document.CompatMode! = 'backCompat') {scrollPos = document.documentElement.scrolltop; } อื่นถ้า (typeof document.body! = 'undefined') {scrollpos = document.body.scrolltop; } Alert (ScrollPos); พิเศษ 2: ความกว้างข้อความแบบเต็มของหน้าเว็บ: "+ document.body.scrollwidth; ความสูงข้อความเต็มของหน้าเว็บ:"+ document.body.scrollheight; ฟังก์ชั่นข้างต้นไม่สามารถรับได้ในบางครั้งดังนั้นใช้วิธีการต่อไปนี้ var xscroll, yscroll; if (window.innerHeight && window.scrollmaxy) {xscroll = document.body.scrollwidth; yscroll = window.innerHeight + window.scrollmaxy; } อื่นถ้า (document.body.scrollheight> document.body.offsetheight) {// ทั้งหมดยกเว้น Explorer Mac Xscroll = document.body.scrollwidth; yscroll = document.body.scrollheight; } else {// explorer mac ... จะทำงานใน Explorer 6 เข้มงวด, Mozilla และ Safari Xscroll = document.body.offsetWidth; yscroll = document.body.offsetheight; -นักเดินเรือ
วัตถุ Navigator แสดงถึงข้อมูลของเบราว์เซอร์ คุณสมบัติที่ใช้กันมากที่สุด ได้แก่ :
• Navigator.Appname: ชื่อเบราว์เซอร์;
• Navigator.Appversion: เวอร์ชันเบราว์เซอร์;
• Navigator.Language: ภาษาที่กำหนดโดยเบราว์เซอร์;
• Navigator.platform: ประเภทระบบปฏิบัติการ;
• Navigator.useragent: สตริงผู้ใช้ตัวแทนที่ตั้งค่าโดยเบราว์เซอร์
เพื่อที่จะเขียนรหัสที่แตกต่างกันสำหรับเบราว์เซอร์ที่แตกต่างกันผู้เริ่มต้นต้องการใช้หากจะตัดสินเวอร์ชันเบราว์เซอร์เช่น:
var width; if (getieversion (navigator.useragent) <9) {width = document.body.clientwidth;} else {width = window.innerWidth;} แต่นี่อาจไม่ถูกต้องในการตัดสินและมันก็ยากที่จะรักษารหัส วิธีที่ถูกต้องคือการใช้ประโยชน์อย่างเต็มที่จากคุณสมบัติของ JavaScript ในการส่งคืน undefined สำหรับคุณสมบัติที่ไม่มีอยู่จริงและใช้ตัวดำเนินการลัดวงจรโดยตรง || เพื่อคำนวณ:
var width = window.innerWidth || document.body.clientwidth;
หน้าจอ
วัตถุหน้าจอแสดงข้อมูลของหน้าจอ คุณสมบัติทั่วไป ได้แก่ :
•หน้าจอความกว้าง: ความกว้างของหน้าจอในพิกเซล;
•หน้าจอ height: ความสูงของหน้าจอในพิกเซล;
• Screen.ColordEpth: ส่งคืนจำนวนตัวเลขสีเช่น 8, 16, 24
ที่ตั้ง
วัตถุตำแหน่งแสดงข้อมูล URL ของหน้าปัจจุบัน ตัวอย่างเช่น URL ที่สมบูรณ์:
http://www.example.com:8080/path/index.html?a=1&b=2#top
สามารถรับได้โดยใช้ location.href เพื่อให้ได้ค่าของแต่ละส่วนของ URL คุณสามารถเขียนได้เช่นนี้:
location.protocol; // 'http'location.host; // 'www.example.com' ตำแหน่ง. พอร์ต; // '8080'Location.PathName; // '/path/index.html'location.search; // '? a = 1 & b = 2'location.hash; // 'สูงสุด'
ในการโหลดหน้าใหม่คุณสามารถโทรหาตำแหน่ง ASSIGN () หากคุณต้องการโหลดหน้าปัจจุบันซ้ำมันสะดวกมากในการโทรหาวิธีการที่ reload ()
เอกสาร
วัตถุเอกสารแสดงหน้าปัจจุบัน เนื่องจาก HTML ถูกแสดงเป็นโครงสร้างต้นไม้ในเบราว์เซอร์ในรูปแบบของ DOM วัตถุเอกสารจึงเป็นโหนดรูทของต้นไม้ DOM ทั้งหมด
แอตทริบิวต์ชื่อเรื่องของเอกสารถูกอ่านจาก <title> xxx </title> ในเอกสาร HTML แต่สามารถเปลี่ยนแปลงได้แบบไดนามิก:
วัตถุเอกสารยังมีแอตทริบิวต์คุกกี้ซึ่งสามารถรับคุกกี้ของหน้าปัจจุบันได้
คุกกี้เป็นตัวระบุค่าคีย์ที่ส่งโดยเซิร์ฟเวอร์ เนื่องจากโปรโตคอล HTTP ไร้สัญชาติเซิร์ฟเวอร์จึงสามารถแยกแยะความแตกต่างระหว่างคำขอของผู้ใช้ที่ส่งโดยมันและสามารถแยกแยะได้ด้วยคุกกี้ เมื่อผู้ใช้เข้าสู่ระบบสำเร็จเซิร์ฟเวอร์จะส่งคุกกี้ไปยังเบราว์เซอร์เช่น user = abc123xyz (สตริงที่เข้ารหัส) หลังจากนั้นเมื่อเบราว์เซอร์เข้าชมเว็บไซต์มันจะแนบคุกกี้นี้กับส่วนหัวคำขอและเซิร์ฟเวอร์สามารถแยกแยะผู้ใช้ตามคุกกี้
คุกกี้ยังสามารถจัดเก็บการตั้งค่าบางอย่างของเว็บไซต์เช่นภาษาของหน้าแสดง ฯลฯ
JavaScript สามารถอ่านคุกกี้ในหน้าปัจจุบันผ่าน document.cookie:
Document.cookie; // 'v = 123; จำไว้ = จริง; ชอบ = zh '
เนื่องจาก JavaScript สามารถอ่านคุกกี้บนหน้าและข้อมูลการเข้าสู่ระบบของผู้ใช้มักจะมีอยู่ในคุกกี้สิ่งนี้จะสร้างความเสี่ยงด้านความปลอดภัยอย่างมาก นี่เป็นเพราะการแนะนำรหัส JavaScript ของบุคคลที่สามในหน้า HTML ได้รับอนุญาต:
<!-หน้าปัจจุบันอยู่ที่ wwwexample.com-> <html> <head> <script src = "http://www.foo.com/jquery.js"> </script> </head> </html>
หากรหัสที่เป็นอันตรายมีอยู่ใน JavaScript ของบุคคลที่สามที่แนะนำเว็บไซต์ www.foo.com จะได้รับข้อมูลการเข้าสู่ระบบผู้ใช้โดยตรงของเว็บไซต์ www.example.com
เพื่อแก้ปัญหานี้เซิร์ฟเวอร์สามารถใช้ httponly เมื่อตั้งค่าคุกกี้ คุกกี้ที่ตั้งค่า httponly จะไม่ถูกอ่านโดย JavaScript พฤติกรรมนี้ถูกนำไปใช้โดยเบราว์เซอร์และเบราว์เซอร์กระแสหลักรองรับตัวเลือก httponly เพื่อให้มั่นใจว่าเซิร์ฟเวอร์ควรยืนยันการใช้ httponly เสมอเมื่อตั้งค่าคุกกี้
document.write () เพียงแค่ส่งเนื้อหาใหม่ไปยังเอกสาร
หาก document.write ถูกดำเนินการหลังจากโหลดเอกสารหน้า HTML ทั้งหมดจะถูกเขียนทับ:
การอ้างอิง: http://www.w3school.com.cn/tiy/t.asp?f=js_write_over
DOM | เอกสาร
// ส่งคืนโหนดด้วย ID 'ทดสอบ': var test = document.getElementById ('ทดสอบ'); // รับโหนดลูกโดยตรงทั้งหมดภายใต้การทดสอบโหนด: var cs = test.children; var first = test.firstelementChild; วิธีที่สองคือการใช้ querySelector() และ querySelectorAll() คุณต้องเข้าใจไวยากรณ์ตัวเลือกแล้วใช้เงื่อนไขเพื่อรับโหนดซึ่งสะดวกกว่า:
// รับโหนดที่มี ID Q1 ผ่าน querySelector: var q1 = document.querySelector ('#q1'); // รับโหนดทั้งหมดในโหนด Q1 ที่ตรงกับเงื่อนไขผ่าน querySelectorall: var ps = q1.querySelectorall ('div.Highlighted> p');การพูดอย่างเคร่งครัดโหนด DOM ที่นี่หมายถึงองค์ประกอบ แต่โหนด DOM เป็นโหนดจริง ใน HTML โหนดจะมีองค์ประกอบหลายชนิดความคิดเห็น cdata_section ฯลฯ รวมถึงประเภทเอกสารรูทโหนด อย่างไรก็ตามเวลาส่วนใหญ่ที่เราใส่ใจเกี่ยวกับองค์ประกอบนั่นคือโหนดที่ควบคุมโครงสร้างหน้าจริงและไม่สนใจโหนดประเภทอื่น ๆ เอกสารรูทโหนดถูกผูกไว้กับเอกสารตัวแปรทั่วโลกโดยอัตโนมัติ
แก้ไข DOM
การปรับเปลี่ยน CSS ยังเป็นการดำเนินการทั่วไป แอตทริบิวต์สไตล์ของโหนด DOM สอดคล้องกับ CSS ทั้งหมดและสามารถดึงหรือตั้งค่าได้โดยตรง เนื่องจาก CSS อนุญาตให้ใช้ชื่อเช่นขนาดตัวอักษร แต่ไม่ใช่ชื่อคุณสมบัติที่ถูกต้องสำหรับ JavaScript จึงจำเป็นต้องถูกเขียนใหม่ไปยังชื่อสไตล์อูฐใน JavaScript:
// รับ <p id = "p-id"> ... </p> var p = document.getElementById ('p-id'); // ตั้งค่า css: p.style.color = '#ff0000'; p.style.fontsize = '20px'; p.style.paddingtop = '2em';แทรก DOM
มีสองวิธีในการแทรกโหนดใหม่ หนึ่งคือการใช้ AppendChild เพื่อเพิ่มโหนดเด็กลงในโหนดลูกสุดท้ายของโหนดพาเรนต์ ตัวอย่างเช่น:
<!-โครงสร้าง html-> <p id = "js"> javascript </p> <div id = "list"> <p id = "scheme"> scheme </p> </div>
เพิ่ม <p id="js">JavaScript</p> ไปยังรายการสุดท้ายของ <div id="list"> :
var js = document.getElementById ('js'), list = document.getElementById ('รายการ'); list.appendchild (js);ตอนนี้โครงสร้าง HTML กลายเป็นเช่นนี้:
<!-โครงสร้าง html-> <div id = "list"> <p id = "scheme"> scheme </p> <p id = "js"> JavaScript </p> </div>
เนื่องจากโหนด js ที่เราแทรกอยู่แล้วในแผนผังเอกสารปัจจุบันโหนดนี้จะถูกลบออกจากตำแหน่งเดิมก่อนแล้วจึงแทรกเข้าไปในตำแหน่งใหม่
บ่อยกว่านั้นเราจะสร้างโหนดใหม่จากศูนย์และแทรกลงในตำแหน่งที่ระบุ:
haskell = document.createElement ('P'); การสร้างโหนดแบบไดนามิกจากนั้นเพิ่มลงในต้นไม้ DOM สามารถบรรลุฟังก์ชั่นมากมาย ตัวอย่างเช่นรหัสต่อไปนี้สร้างโหนด <style> แบบไดนามิกและเพิ่มลงในตอนท้ายของโหนด <head> ดังนั้นการเพิ่มคำจำกัดความ CSS ใหม่ในเอกสาร: แบบไดนามิก:
var d = document.createElement ('style'); d.setAttribute ('type', 'text/css'); d.innerhtml = 'p {color: red}'; document.getElementsByTagname ('head') [0] .AppendChild (d);แทรกก่อน
ถ้าเราต้องการแทรกโหนดเด็กลงในตำแหน่งที่ระบุ คุณสามารถใช้ parentelement.insertbefore (newelement, ReferenceElement); และโหนดลูกจะถูกแทรกก่อนการอ้างอิง
หลายครั้งมีความจำเป็นที่จะต้องวนผ่านเด็กทุกคนของโหนดแม่ซึ่งสามารถนำไปใช้โดยการวนซ้ำผ่านแอตทริบิวต์เด็ก:
var i, c, list = document.getElementById ('รายการ'); สำหรับ (i = 0; i <list.children.length; i ++) {c = list.children [i]; // รับโหนดลูก i-th}ลบ DOM
ในการลบโหนดก่อนอื่นคุณจะต้องได้รับโหนดและโหนดพาเรนต์ของมันจากนั้นเรียกรีมิโรเชิลของโหนดพาเรนต์เพื่อลบตัวเอง:
// รับโหนดที่จะถูกลบ: var self = document.getElementById ('to-be-removed'); // รับโหนดพาเรนต์: var parent = self.parentelement; // ลบ: var ลบ = parent.removeChild (self); ลบ === ตัวเอง; // จริงฉันสังเกตเห็นว่าถึงแม้ว่าโหนดที่ถูกลบจะไม่อยู่ในแผนผังเอกสารอีกต่อไป แต่ก็ยังอยู่ในหน่วยความจำและสามารถเพิ่มไปยังตำแหน่งอื่นได้ตลอดเวลา
เมื่อคุณสำรวจลูกของโหนดพาเรนต์และดำเนินการลบโปรดทราบว่าแอตทริบิวต์เด็กเป็นแอตทริบิวต์แบบอ่านอย่างเดียวและจะได้รับการปรับปรุงตามเวลาจริงเมื่อโหนดเด็กเปลี่ยนไป ดังนั้นเมื่อลบหลายโหนดเป็นสิ่งสำคัญที่จะต้องทราบว่าแอตทริบิวต์เด็กกำลังเปลี่ยนแปลงตลอดเวลา
แบบฟอร์มการทำงาน
การใช้ JavaScript เพื่อจัดการกับรูปแบบนั้นคล้ายกับการทำงานของ DOM เนื่องจากรูปแบบนั้นเป็นต้นไม้ DOM
อย่างไรก็ตามกล่องอินพุตแบบฟอร์มกล่องแบบเลื่อนลง ฯลฯ สามารถรับอินพุตของผู้ใช้ได้ดังนั้นการใช้ JavaScript เพื่อใช้งานฟอร์มสามารถรับเนื้อหาที่ผู้ใช้ที่ป้อนหรือตั้งค่าเนื้อหาใหม่สำหรับกล่องอินพุต
ส่วนใหญ่มีการควบคุมอินพุตต่อไปนี้สำหรับรูปแบบ HTML:
•กล่องข้อความ, <อินพุต type = "text">, ใช้เพื่อป้อนข้อความ;
•กล่องรหัสผ่าน, <อินพุต type = "รหัสผ่าน">, ใช้เพื่อป้อนรหัสผ่าน;
•กล่องวิทยุ, <อินพุต type = "วิทยุ">, ใช้เพื่อเลือกรายการ;
•ช่องทำเครื่องหมายที่เกี่ยวข้อง <อินพุตประเภท = "ช่องทำเครื่องหมาย"> ใช้เพื่อเลือกหลายรายการ
•กล่องดรอปดาวน์ซึ่งเป็น <Select> ที่สอดคล้องกันใช้เพื่อเลือกรายการ
•ข้อความที่ซ่อนอยู่ <อินพุต type = "ซ่อน"> ไม่สามารถมองเห็นได้สำหรับผู้ใช้ แต่ข้อความที่ซ่อนอยู่จะถูกส่งไปยังเซิร์ฟเวอร์เมื่อส่งแบบฟอร์ม
รับค่า
หากเราได้รับการอ้างอิงถึงโหนด <อินพุต> เราสามารถเรียกค่าโดยตรงเพื่อรับค่าอินพุตผู้ใช้ที่เกี่ยวข้อง:
// <อินพุต type = "text" id = "อีเมล"> var input = document.getElementById ('อีเมล'); input.value; // 'ค่าที่ป้อนโดยผู้ใช้' วิธีนี้สามารถนำไปใช้กับ text password hidden และ select อย่างไรก็ตามสำหรับวิทยุและกล่องกาเครื่องหมายแอตทริบิวต์ value จะส่งคืนค่า HTML PREST PRESET เสมอและสิ่งที่เราจำเป็นต้องได้รับคือจริงว่าผู้ใช้มีตัวเลือก "ตรวจสอบ" ดังนั้นควรใช้ checked เพื่อตัดสิน:
// <lable> <อินพุต type = "Radio" name = "วันธรรมดา" id = "วันจันทร์" value = "1"> วันจันทร์ </label> // <label> <อินพุต type = "วิทยุ" ชื่อ = "วันธรรมดา" id = "วันอังคาร" value = "2"> วันอังคาร // '1'tue.value; // '2'mon.Checked; // จริงหรือเท็จ
กำหนดค่า
การตั้งค่าค่าคล้ายกับการรับค่า สำหรับข้อความรหัสผ่านซ่อนและเลือกคุณสามารถตั้งค่าได้โดยตรง:
// <อินพุต type = "text" id = "อีเมล"> var input = document.getElementById ('อีเมล'); input.value = '[email protected]'; // เนื้อหาของกล่องข้อความได้รับการอัปเดตแล้วสำหรับวิทยุและช่องทำเครื่องหมายตั้งค่าการตรวจสอบเป็นจริงหรือเท็จ
การควบคุม HTML5
HTML5 ได้เพิ่มการควบคุมมาตรฐานจำนวนมากโดยทั่วไปแล้วรวมถึงวันที่วันที่ dateTime, dateTime-local, สี ฯลฯ พวกเขาทั้งหมดใช้แท็ก <put>:
<อินพุต type = "วันที่" value = "2015-07-01">
<อินพุต type = "dateTime-local" value = "2015-07-01T02: 03: 04">
<อินพุต type = "color" value = "#ff0000">
เบราว์เซอร์ที่ไม่รองรับ HTML5 ไม่สามารถรับรู้การควบคุมใหม่และจะแสดงเป็น type = "text" เบราว์เซอร์ที่รองรับ HTML5 จะได้รับสตริงที่จัดรูปแบบ ตัวอย่างเช่นค่าของ Type = "วันที่" จะรับประกันได้ว่าเป็นวันที่ที่ถูกต้องในรูปแบบ yyyy-MM-DD หรือสตริงว่าง
ส่งแบบฟอร์ม
ในที่สุด JavaScript สามารถจัดการการส่งแบบฟอร์มได้สองวิธี (มีการแนะนำวิธี AJAX ในบทต่อไปนี้)
วิธีแรกคือการส่งแบบฟอร์มผ่านวิธีการส่ง () ขององค์ประกอบ <form> ตัวอย่างเช่นในการตอบสนองต่อเหตุการณ์ <button> คลิกส่งแบบฟอร์มในรหัส JavaScript:
<form id = "test-form"> <input type = "text" name = "test"> <button type = "ปุ่ม" onclick = "dosubmitform ()"> ส่ง </button> </form> <script> ฟังก์ชั่น dosubmitform () {var form = document.getElementById ('test-form'); // คุณสามารถแก้ไขอินพุตของแบบฟอร์มได้ที่นี่ ... // ส่งแบบฟอร์ม: form.submit ();} </script> ข้อเสียของวิธีนี้คือมันขัดขวางการส่งของเบราว์เซอร์ในรูปแบบปกติ เบราว์เซอร์ส่งแบบฟอร์มเมื่อคลิก <button type="submit"> โดยค่าเริ่มต้นหรือผู้ใช้กดปุ่ม Enter ในกล่องอินพุตล่าสุด ดังนั้นวิธีที่สองคือการตอบสนองต่อเหตุการณ์ onsubmit ของ <form> ตัวเองและทำการเปลี่ยนแปลงเมื่อส่งแบบฟอร์ม:
<form id = "test-form" onsubmit = "return checkform ()"> <input type = "text" name = "test"> <button type = "ส่ง"> ส่ง </button> </form> <script> ฟังก์ชั่น phection () {var form = document.getElementById ('test-form); // คุณสามารถแก้ไขอินพุตของแบบฟอร์มได้ที่นี่ ... // ดำเนินการต่อไปยังขั้นตอนถัดไป: return true;} </script> โปรดทราบว่าต้อง return true จะต้องบอกเบราว์เซอร์ให้ส่งต่อไป หาก return false เบราว์เซอร์จะไม่ส่งแบบฟอร์มต่อไป สถานการณ์นี้มักจะสอดคล้องกับข้อผิดพลาดในการป้อนข้อมูลของผู้ใช้และผู้ใช้จะได้รับแจ้งสำหรับข้อความแสดงข้อผิดพลาดและแบบฟอร์มถูกยกเลิก
เมื่อตรวจสอบและแก้ไข <input> ให้ใช้ประโยชน์จาก <input type="hidden"> เพื่อส่งผ่านข้อมูล
ตัวอย่างเช่นแบบฟอร์มการเข้าสู่ระบบจำนวนมากต้องการให้ผู้ใช้ป้อนชื่อผู้ใช้และรหัสผ่าน แต่ด้วยเหตุผลด้านความปลอดภัยอย่าส่งรหัสผ่านข้อความธรรมดาเมื่อส่งแบบฟอร์ม แต่ MD5 ของรหัสผ่าน นักพัฒนาจาวาสคริปต์ทั่วไปจะแก้ไขโดยตรง <input> ::
<form id = "login-form" method = "post" onsubmit = "return pheckform ()"> <input type = "text" id = "ชื่อผู้ใช้" ชื่อ = "ชื่อผู้ใช้"> <อินพุตประเภท = "รหัสผ่าน" id = "รหัสผ่าน" ชื่อ "รหัสผ่าน" // เปลี่ยนข้อความธรรมดาที่ผู้ใช้ป้อนเป็น MD5: pwd.value = TOMD5 (pwd.value); // ดำเนินการต่อไปยังขั้นตอนถัดไป: ส่งคืน true;} </script>
วิธีนี้ดูเหมือนจะไม่เป็นไร แต่เมื่อผู้ใช้ป้อนรหัสผ่านเพื่อส่งกล่องรหัสผ่านจะแสดงจากหลาย * ถึง 32 * (เนื่องจาก MD5 มี 32 อักขระ)
ในการไม่เปลี่ยนอินพุตของผู้ใช้คุณสามารถใช้ <input type="hidden"> เพื่อนำไปใช้:
<form id = "login-form" method = "post" onsubmit = "return pheckform ()"> <input type = "text" id = "username" name = "username"> <อินพุตประเภท = "รหัสผ่าน" id = "input-password"> <อินพุต type = "hidden" id = "md5-password" var input_pwd = document.getElementById ('input-password'); var md5_pwd = document.getElementById ('md5-password'); // เปลี่ยนข้อความธรรมดาที่ผู้ใช้ป้อนเป็น MD5: MD5_PWD.VALUE = TOMD5 (input_pwd.Value); // ดำเนินการต่อไปยังขั้นตอนถัดไป: ส่งคืน true;} </script>โปรดทราบว่า <put> พร้อม ID ของ MD5-PASSWORD NAMED NAME = "รหัสผ่าน" ในขณะที่ ID ที่ป้อนโดยผู้ใช้คืออินพุต -PASSWORD โดยไม่มีแอตทริบิวต์ชื่อ ข้อมูลที่ไม่มีแอตทริบิวต์ชื่อ <put> จะไม่ถูกส่ง
ไฟล์การดำเนินการ
ในรูปแบบ HTML ตัวควบคุมเดียวที่สามารถอัปโหลดไฟล์คือ <อินพุต Type = "ไฟล์">
หมายเหตุ: เมื่อรูปแบบมี <อินพุต type = "ไฟล์">, Enctype ของแบบฟอร์มจะต้องระบุเป็น multipart/form-data และวิธีการจะต้องระบุเป็นโพสต์เพื่อให้เบราว์เซอร์สามารถเข้ารหัสและส่งข้อมูลของแบบฟอร์มในรูปแบบ multipart/form-data ได้อย่างถูกต้อง
ด้วยเหตุผลด้านความปลอดภัยเบราว์เซอร์อนุญาตให้ผู้ใช้คลิก <อินพุต type = "ไฟล์"> เพื่อเลือกไฟล์ในพื้นที่เท่านั้น การใช้ JavaScript เพื่อกำหนดค่าให้ <อินพุต type = "ไฟล์"> ไม่มีผล เมื่อผู้ใช้เลือกที่จะอัปโหลดไฟล์ JavaScript ไม่สามารถรับพา ธ จริงไปยังไฟล์:
ไฟล์ที่จะอัปโหลด:
โดยปกติแล้วไฟล์ที่อัปโหลดจะถูกประมวลผลโดยเซิร์ฟเวอร์แบ็กเอนด์ JavaScript สามารถตรวจสอบส่วนขยายไฟล์เมื่อส่งแบบฟอร์มเพื่อป้องกันไม่ให้ผู้ใช้อัปโหลดไฟล์ในรูปแบบที่ไม่ถูกต้อง:
var f = document.getElementById ('test-file-upload'); var filename = f.value; // 'c: /fakepath/test.png'if (! filename ||! (filename.endswith ('. jpg ') || filename.endswith ('. png ') || filename.endswith (' gif '))) ส่งคืน false;}ไฟล์ API
เนื่องจาก JavaScript มีการดำเนินการที่ จำกัด อย่างมากเกี่ยวกับไฟล์ที่อัปโหลดโดยผู้ใช้โดยเฉพาะอย่างยิ่งการไม่สามารถอ่านเนื้อหาไฟล์ได้หน้าเว็บจำนวนมากที่ต้องใช้ไฟล์ปฏิบัติการจะต้องใช้งานโดยใช้ปลั๊กอินของบุคคลที่สามเช่น Flash
ด้วยความนิยมของ HTML5 ไฟล์ API ที่เพิ่มเข้ามาใหม่อนุญาตให้ JavaScript อ่านเนื้อหาไฟล์และรับข้อมูลไฟล์เพิ่มเติม
ไฟล์ API ของ HTML5 มีวัตถุหลักสองวัตถุ: ไฟล์และ filereader ซึ่งสามารถรับข้อมูลไฟล์และอ่านไฟล์
ตัวอย่างต่อไปนี้แสดงวิธีอ่านไฟล์รูปภาพที่ผู้ใช้เลือกและดูตัวอย่างภาพใน <div>::
ภาพตัวอย่าง:
var fileInput = document.getElementById ('test-image-file'), info = document.getElementById ('test-file-info'), preview = document.getElementById ('test-image-Preview'); // ฟังการเปลี่ยนแปลงเหตุการณ์: fileInput.addeVentListener ('เปลี่ยน', ฟังก์ชั่น () {// ภาพพื้นหลังที่ชัดเจน: ดูตัวอย่าง style.backgroundroundroundimage = ''; // ตรวจสอบว่าไฟล์ถูกเลือก: ถ้า (! fileInput.value) {info.innerhtml = info.innerhtml = 'ไฟล์:' + file.name + '<br>' + 'ขนาด:' + file.size + '<br>' + 'แก้ไข:' + file.lastmodifieddate; ไฟล์ที่ถูกต้อง! อ่านไฟล์ในรูปแบบของ dataurl: reader.readasdataurl (ไฟล์);});รหัสข้างต้นแสดงวิธีอ่านเนื้อหาไฟล์ผ่านไฟล์ API ของ HTML5 ไฟล์ที่อ่านในรูปแบบของ dataurl เป็นสตริงคล้ายกับข้อมูล: image/jpeg; base64,/9j/4aaqsk ... (การเข้ารหัส Base64) มันมักจะใช้ในการตั้งค่าภาพ หากจำเป็นต้องมีการประมวลผลฝั่งเซิร์ฟเวอร์ให้ส่งอักขระหลังจาก String Base64 ไปยังเซิร์ฟเวอร์และถอดรหัสด้วย Base64 เพื่อรับเนื้อหาไบนารีของไฟล์ต้นฉบับ
การโทรกลับ
รหัสข้างต้นยังแสดงให้เห็นถึงคุณสมบัติที่สำคัญของ JavaScript ซึ่งเป็นโหมดการดำเนินการแบบเธรดเดี่ยว ใน JavaScript เอ็นจิ้นการดำเนินการ JavaScript ของเบราว์เซอร์จะดำเนินการในโหมดเธรดเดี่ยวเสมอเมื่อเรียกใช้รหัส JavaScript ซึ่งหมายความว่าในเวลาใดก็ได้มันเป็นไปไม่ได้ที่รหัส JavaScript จะมีเธรดมากกว่า 1 รายการในเวลาเดียวกัน
คุณอาจถามว่าจะจัดการมัลติทาสกิ้งในโหมดเดี่ยวได้อย่างไร?
ใน JavaScript การทำงานหลายอย่างถูกเรียกแบบอะซิงโครนัสเช่นรหัสข้างต้น:
reader.readasdataurl (ไฟล์);
การดำเนินการแบบอะซิงโครนัสจะเริ่มอ่านเนื้อหาไฟล์ เนื่องจากเป็นการดำเนินการแบบอะซิงโครนัสเราจึงไม่ทราบว่าการดำเนินการสิ้นสุดลงในรหัส JavaScript ดังนั้นเราจึงต้องตั้งค่าฟังก์ชั่นการโทรกลับก่อน:
reader.onload = function (e) {// เมื่ออ่านไฟล์ฟังก์ชั่นนี้เรียกโดยอัตโนมัติ:};เมื่อไฟล์อ่านเสร็จสิ้นแล้วเอ็นจิ้น JavaScript จะเรียกใช้ฟังก์ชันการโทรกลับที่เราตั้งไว้โดยอัตโนมัติ เมื่อมีการเรียกใช้ฟังก์ชันการเรียกกลับไฟล์จะได้รับการอ่านดังนั้นเราจึงสามารถรับเนื้อหาไฟล์ภายในฟังก์ชันการโทรกลับได้อย่างปลอดภัย
บทความข้างต้นพูดสั้น ๆ เกี่ยวกับวัตถุเบราว์เซอร์ JavaScript เป็นเนื้อหาทั้งหมดที่ฉันแบ่งปันกับคุณ ฉันหวังว่ามันจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น