Part1 CSS ที่เกี่ยวข้อง
1 องค์ประกอบอินไลน์และบล็อกคืออะไร?
องค์ประกอบอินไลน์ทั่วไป (องค์ประกอบในบรรทัด) รวมถึง a, b, span, i, em, อินพุต, select, img ฯลฯ
องค์ประกอบบล็อกทั่วไป ได้แก่ DIV, UL, LI, H1 ~ H6, Talbe, OL, UL, TD, P ฯลฯ
2 ที่เกี่ยวข้องลอย
เค้าโครงลอยตัวหมายถึงการลบองค์ประกอบออกจากสตรีม/สตรีมเอกสารปกติเพื่อให้สามารถเลื่อนไปทางซ้ายและขวาจนกว่าขอบด้านนอกจะตรงกับขอบที่มีกล่องหรือกล่องลอยอื่น กล่องลอยน้ำไม่ได้เป็นของสตรีมปกติในเอกสาร เมื่อองค์ประกอบลอยตัวมันจะไม่ส่งผลกระทบต่อเลย์เอาต์ขององค์ประกอบระดับบล็อก แต่จะส่งผลกระทบต่อการจัดเรียงขององค์ประกอบอินไลน์เท่านั้น
มันเป็นเพราะองค์ประกอบลอยตัวถูกแยกออกจากสตรีมเอกสารที่องค์ประกอบหลักไม่ทราบการมีอยู่ของมันดังนั้นมันจะทำงานเป็นความสูง 0 ไม่ว่าองค์ประกอบลอยตัวจะเปลี่ยนไปอย่างไรองค์ประกอบหลักของมันจะไม่ห่อหุ้มด้วย ปรากฏการณ์นี้เรียกอีกอย่างว่า "การล่มสลายของความสูง"
ในตัวอย่างต่อไปนี้โดยไม่คำนึงถึงความสูงของ #floatdom ที่เปลี่ยนแปลงไปความสูง #parent จะอยู่เสมอ 0 ซึ่งจะทำให้เส้นขอบองค์ประกอบหลักไม่สามารถยืดออกได้
<div id = "parent"> <div id = "floatdom" style = "float: left; width: 300px; ความสูง: 300px;"> <div style = "ชัดเจน: ทั้งสอง"> </div>
เนื่องจากการมีอยู่ของการยุบอย่างมาก (ซึ่งมักจะไม่ใช่สิ่งที่เราคาดหวัง) การลอยต้องถูกล้าง นี่คือหลายวิธีในการล้างลอย:
•เพิ่มองค์ประกอบด้วยสไตล์ "ชัดเจน: ทั้งสอง" หลังจากองค์ประกอบลอยตัว
<div id = "parent"> <div id = "floatdom" style = "float: left; width: 300px; ความสูง: 300px;"> <div style = "ชัดเจน: ทั้งสอง"> </div>
นอกจากนี้คุณยังสามารถเพิ่มแท็ก BR ซึ่งมาพร้อมกับความชัดเจน: ทั้งสองคุณลักษณะ
<div id = "parent"> <div id = "floatdom" style = "float: left; width: 300px; ความสูง: 300px;"> <br/> </div>
ข้อดีของการใช้วิธีนี้เพื่อล้างการลอยตัวคือมันง่ายที่จะเข้าใจง่ายที่จะเชี่ยวชาญและข้อเสียก็ชัดเจนเช่นกัน มีการเพิ่มป้ายกำกับที่ไม่มีความหมายหลายอย่างซึ่งเจ็บปวดมากในการบำรุงรักษาในภายหลัง
•เพิ่มสไตล์ "ล้น: ซ่อน" ลงในองค์ประกอบหลัก
<div id = "parent" style = "overflow: hidden"> <div id = "floatdom" style = "float: left; width: 300px; ความสูง: 300px;"> </div>
ไม่มีปัญหาเชิงโครงสร้างและความหมายในลักษณะนี้และปริมาณของรหัสมีขนาดเล็กมาก อย่างไรก็ตามเมื่อเนื้อหาเพิ่มขึ้นเนื้อหาจะไม่ถูกห่อหุ้มโดยอัตโนมัติและเนื้อหาจะถูกซ่อนไว้และองค์ประกอบที่ต้องมีการล้นไม่สามารถแสดงได้
•ใช้: หลังเทียม-องค์ประกอบ
<style type = "text/css"> .clearfix: หลังจาก {content: "."; แสดง: บล็อก; ความสูง: 0; ทัศนวิสัย: ซ่อน; ชัดเจน: ทั้งสอง; } .ClearFix { *ซูม: 1; } </style> <div id = "parent"> <div id = "floatdom" style = "float: left; width: 300px; ความสูง: 300px;"> </div>การใช้วิธีนี้คุณจะต้องเพิ่มคลาสลงในองค์ประกอบเป้าหมายซึ่งเป็นวิธีที่ใช้กันมากที่สุดในปัจจุบัน
อ้างอิง
iyunlu.com/view/css-xht
3. ความแตกต่างระหว่างเลย์เอาต์สัมพัทธ์และเค้าโครงสัมบูรณ์
ความแตกต่างที่สำคัญที่สุดระหว่างเลย์เอาต์สัมพัทธ์และเค้าโครงสัมบูรณ์คือไม่ว่าจะถูกแยกออกจากการไหลของเอกสารหรือไม่
เค้าโครงสัมพัทธ์จะไม่ถูกแยกออกจากการไหลของเอกสารนั่นคือหลังจากตั้งค่าเค้าโครงสัมพัทธ์ขององค์ประกอบการไหลของเอกสารยังคงรักษาตำแหน่งเดิม โดยการตั้งค่าคุณสมบัติเช่นด้านบนและซ้ายสามารถตั้งค่าออฟเซ็ตเทียบกับตำแหน่งเดิม
เค้าโครงสัมบูรณ์จะถูกแยกออกจากการไหลของเอกสารนั่นคือองค์ประกอบในการไหลของเอกสารไม่ทราบว่าการมีอยู่ขององค์ประกอบการจัดวางแบบสัมบูรณ์ การวางตำแหน่งของเค้าโครงสัมบูรณ์นั้นสัมพันธ์กับองค์ประกอบที่มีเลย์เอาต์สัมพัทธ์หรือเค้าโครงสัมบูรณ์ในองค์ประกอบหลัก หากไม่มีอยู่มันจะสัมพันธ์กับเค้าโครงของร่างกาย
4 กล่องรุ่น
โมเดลกล่องกำหนดรูปแบบการแสดงผลขององค์ประกอบรวมถึงเนื้อหา (เนื้อหา), การขยาย (ระยะขอบด้านใน), เส้นขอบ (ขอบเขต) และระยะขอบ (ขอบด้านนอก) ขณะนี้มีมาตรฐานกล่องสองกล่องหนึ่งคือโมเดลกล่องมาตรฐาน W3C และอีกรุ่นหนึ่งคือโมเดล IE Box ซึ่งใช้มาตรฐานของ Microsoft เอง
ความแตกต่างระหว่างโมเดลสองกล่องนี้ส่วนใหญ่อยู่ในการคำนวณความกว้างขององค์ประกอบ ความกว้างที่กำหนดไว้ใน CSS ในโหมดมาตรฐานคือความกว้างของเนื้อหาความกว้างที่ครอบครองโดยองค์ประกอบทั้งหมดในหน้าและสูตรการคำนวณคือ:
การคัดลอกรหัสมีดังนี้:
dom_width = width + padding + border + margin
ในโมเดลกล่อง IE ความกว้างที่กำหนดไว้ใน CSS คือเนื้อหา + ช่องว่าง + เส้นขอบ ดังนั้นในโมเดลกล่อง IE ความกว้างที่ครอบครองโดยองค์ประกอบทั้งหมดในหน้าคือ (เช่นเดียวกับความสูง)
การคัดลอกรหัสมีดังนี้:
dom_width = ความกว้าง + มาร์จิ้น
ใน CSS3 มีการเก็บรักษาแบบกล่องสองกล่องโดยใช้ box-sizing เมื่อเราตั้งค่า box-sizing: content-box (ค่าเริ่มต้น) เราใช้โมเดลกล่องมาตรฐาน W3C เมื่อเราตั้งค่า box-sizing:border-box เราใช้โมเดลกล่อง IE
5 CSS รีเซ็ต (รีเซ็ต)
แต่ละเบราว์เซอร์มีสไตล์บางอย่างที่มาพร้อมกับมันและสไตล์ที่มาพร้อมกับมันมักจะแตกต่างกันในแต่ละเบราว์เซอร์ซึ่งนำมาซึ่งความไม่สะดวกในการจัดวางของเรา ดังนั้นในทางปฏิบัติมักจำเป็นต้อง "ชัดเจน" สไตล์ CSS ของเบราว์เซอร์นั่นคือการรีเซ็ต CSS รหัสรีเซ็ตที่ง่ายที่สุดมีดังนี้:
*{มาร์จิ้น: 0; Padding: 0;}แม้ว่าวิธีนี้จะง่าย แต่ก็เป็น "ความรุนแรง" เกินไปเพราะองค์ประกอบหลายอย่างเช่น Div และ Li ไม่มีระยะขอบหรือรูปแบบการขยายโดยค่าเริ่มต้นซึ่งเป็นเท่ากับที่ทำให้เกิดความซ้ำซ้อนมาก วิธีที่แนะนำมากขึ้นในการเขียนรหัสรีเซ็ตตามความต้องการของคุณ
อ้างอิง:
www.zhangxinxu.com/wordpress/2010/08/html5-css-reset
6 CSS Hack
เนื่องจากเบราว์เซอร์ที่แตกต่างกันมีการแยกวิเคราะห์และสนับสนุน CSS ที่แตกต่างกันจึงส่งผลให้เกิดการแสดงรหัส CSS เดียวกันในเบราว์เซอร์ที่แตกต่างกัน สิ่งนี้ต้องใช้แฮ็ค CSS เพื่อแก้ปัญหาความเข้ากันได้ของเบราว์เซอร์ที่แตกต่างกัน กระบวนการเขียนสไตล์ที่แตกต่างกันสำหรับเบราว์เซอร์ที่แตกต่างกันเรียกว่า CSS Hack
CSS Hack มีหลายรูปแบบทั่วไป:
•คุณสมบัติแฮ็ค
ตัวอย่างเช่น IE6 สามารถรับรู้ _width และ *width ได้ แต่ใน IE7 สามารถรับรู้ได้ *width แต่ไม่สามารถรับรู้ได้ _width ทั้งคู่ไม่ได้รับการยอมรับใน Firefox
•เลือกแฮ็คอักขระ
ตัวอย่างเช่น IE6 สามารถรับรู้ *html .class{} และ IE7 สามารถรับรู้ *+html .class{} หรือ *:first-child+html .class{}
•เงื่อนไขแฮ็ค
IE คำอธิบายประกอบแบบมีเงื่อนไขเป็นคำสั่งเชิงตรรกะที่ไม่ได้มาตรฐานโดย Microsoft ตั้งแต่ IE5 ตัวอย่างเช่นสำหรับ IEs ทั้งหมด:
<! [ถ้าเช่น]> <! รหัสของคุณ> <! [endif]>
สำหรับ IE6 และด้านล่าง:
<! [ถ้า lt ie 7]> <! รหัสของคุณ> <! [endif]>
การแฮ็คประเภทนี้ไม่เพียง แต่มีผลกับ CSS เท่านั้น แต่ยังมีผลบังคับใช้กับรหัสทั้งหมดที่เขียนไว้ในคำพิพากษา
อ้างอิง
//www.vevb.com/css/226888.html
7 ความเสื่อมโทรมอย่างสง่างามและการปรับปรุงแบบก้าวหน้า
การเพิ่มประสิทธิภาพแบบก้าวหน้าหมายถึงการสร้างหน้าเว็บสำหรับเบราว์เซอร์รุ่นต่ำเพื่อให้แน่ใจว่าฟังก์ชั่นพื้นฐานที่สุดจากนั้นปรับปรุงเอฟเฟกต์การโต้ตอบและการปรับปรุงอื่น ๆ และฟังก์ชั่นเพิ่มเติมสำหรับเบราว์เซอร์ขั้นสูงเพื่อให้ได้ประสบการณ์การใช้งานที่ดีขึ้น
การลดระดับที่สง่างามหมายถึงการสร้างฟังก์ชั่นที่สมบูรณ์ตั้งแต่ต้นและจากนั้นเข้ากันได้กับเบราว์เซอร์เวอร์ชันที่ต่ำกว่า
ความแตกต่างระหว่างทั้งสองคือการลดระดับที่หรูหราเริ่มต้นด้วยสถานะที่ซับซ้อนและพยายามลดการจัดหาประสบการณ์ผู้ใช้ในขณะที่การปรับปรุงค่อยเป็นค่อยไปเริ่มต้นด้วยรุ่นพื้นฐานที่ใช้งานได้และมีการขยายอย่างต่อเนื่องเพื่อตอบสนองความต้องการของสภาพแวดล้อมในอนาคต การย่อยสลาย (การสลายตัวของฟังก์ชั่น) หมายถึงการมองย้อนกลับไป; ในขณะที่การปรับปรุงอย่างค่อยเป็นค่อยไปหมายถึงการมองไปข้างหน้าในขณะที่มั่นใจว่ารากฐานของมันอยู่ในพื้นที่ปลอดภัย
8 บอกเราเกี่ยวกับปัญหาความเข้ากันได้ของเบราว์เซอร์ที่พบ
•ระยะขอบด้านในและระยะขอบด้านนอกที่แสดงในเบราว์เซอร์ที่แตกต่างกันนั้นแตกต่างกัน ตัวอย่างเช่นแท็ก UL มีค่าการขยายใน Firefox โดยค่าเริ่มต้นในขณะที่อยู่ใน IE เท่านั้นที่มีค่ามีค่า
การใช้ CSS รีเซ็ต (ดูข้อ 5)
•ข้อผิดพลาดสองเท่าของ IE6 ระยะขอบเดิม 10px หลังจากองค์ประกอบระดับบล็อกลอยอยู่ แต่เช่นตีความเป็น 20px
ตั้งค่าการแสดงองค์ประกอบระดับบล็อกเป็นอินไลน์
•ไม่รองรับความสูงขั้นต่ำใน IE6
ฟังก์ชั่นของความสูงขั้นต่ำคือการรักษาความสูงขั้นต่ำเมื่อคอนเทนเนอร์มีเนื้อหาน้อยกว่าเพื่อไม่ให้ทำลายเอฟเฟกต์การออกแบบหรือการออกแบบ UI เมื่อเนื้อหาในคอนเทนเนอร์เพิ่มขึ้นคอนเทนเนอร์สามารถยืดได้โดยอัตโนมัติเพื่อปรับให้เข้ากับการเปลี่ยนแปลงในเนื้อหา
สามารถแก้ไขได้โดย:
#targetdom {พื้นหลัง: #ccc; ต่ำสุด: 100px; ความสูง: อัตโนมัติ! สำคัญ; ความสูง: 100px; ล้น: มองเห็นได้; -•ฟังก์ชั่นวิธีการของเหตุการณ์ที่มีผลผูกพันในการเชื่อมเหตุการณ์มาตรฐานคือ addeventListener ในขณะที่ IE ใช้ attaineVent
ผ่านการตัดสินตามเงื่อนไขให้เขียนคำสั่งที่มีผลผูกพันสองรายการหรือใช้ไลบรารีเว็บเฟรมเวิร์กเช่น jQuery เพื่อผูก
•เบราว์เซอร์มาตรฐานนำการจับเหตุการณ์มาใช้ในขณะที่ IE ใช้กลไกฟองเหตุการณ์
ต่อมามาตรฐานเชื่อว่าฟองสบู่มีความสมเหตุสมผลมากขึ้นและใช้พารามิเตอร์ที่สามเพื่อตั้งค่า AddEventListener ให้เข้ากันได้กับกลไกสองกลไกและฟองสบู่เป็นค่าเริ่มต้น
•แอตทริบิวต์เหตุการณ์ในการประมวลผลเหตุการณ์นั้นแตกต่างจากในเบราว์เซอร์มาตรฐาน
เบราว์เซอร์มาตรฐานถูกนำมาเป็นพารามิเตอร์และได้รับในหน้าต่าง องค์ประกอบเป้าหมายคือ E.Srcelement เบราว์เซอร์มาตรฐานคือ e.target
ตอนที่ 2 อื่น ๆ
1 เข้าใจรหัสสถานะ HTTP ที่ใช้กันทั่วไป
200 โอเคทุกอย่างโอเคเอกสารตอบกลับไปยังคำขอรับและโพสต์ดังต่อไปนี้
201 เซิร์ฟเวอร์ที่สร้างขึ้นได้สร้างเอกสารและส่วนหัวตำแหน่งให้ URL
202 ยอมรับว่าคำขอได้รับการยอมรับ แต่การประมวลผลยังไม่เสร็จสมบูรณ์
304 ไม่ได้รับการแก้ไขลูกค้ามีเอกสารบัฟเฟอร์และออกคำขอตามเงื่อนไข (โดยปกติจะให้ส่วนหัวของ if-modified-snice ซึ่งระบุว่าลูกค้าต้องการอัปเดตเอกสารเท่านั้นกว่าวันที่ที่ระบุ) เซิร์ฟเวอร์บอกลูกค้าว่าเอกสารบัฟเฟอร์ดั้งเดิมสามารถใช้งานต่อไปได้
400 ข้อผิดพลาดทางไวยากรณ์เกิดขึ้นในคำขอคำขอที่ไม่ดี
404 ไม่พบทรัพยากรในตำแหน่งที่ระบุไม่พบ นี่คือการตอบสนองที่ใช้กันทั่วไป
405 วิธีการไม่อนุญาตให้ใช้วิธีการร้องขอ (รับ, โพสต์, หัว, ลบ, ใส่, การติดตาม ฯลฯ ) ไม่สามารถใช้ได้กับทรัพยากรที่ระบุ (ใหม่สำหรับ HTTP 1.1)
ข้อผิดพลาดเซิร์ฟเวอร์ภายใน 500 เซิร์ฟเวอร์พบสถานการณ์ที่ไม่คาดคิดและไม่สามารถดำเนินการตามคำขอของลูกค้าได้
502 เมื่อเซิร์ฟเวอร์เกตเวย์ที่ไม่ดีทำหน้าที่เป็นเกตเวย์หรือพร็อกซีเพื่อให้การร้องขอเพื่อเข้าถึงเซิร์ฟเวอร์ถัดไปเสร็จสิ้นเซิร์ฟเวอร์จะส่งคืนการตอบกลับที่ผิดกฎหมาย
2 คำขอ AJAX ที่เขียนด้วยลายมือ
// เยาะเย้ยวิธี XMLHTTTPREQUEST ใน IE5 และ IE6 ถ้า (window.xmlhttpRequest === undefined) {window.xmlhttpRequest = function () {ลอง {ส่งคืน ActiveXObject ใหม่ ("msxml2.xmlhttp.6.0"); // พร้อมใช้งานใช้วัตถุ ActiveX ล่าสุด} catch (e1) {ลอง {return activexobject ใหม่ ("msxml2.xmlhttp.3.0"); // ไม่สามารถย้อนกลับรุ่นก่อนหน้า} catch (e2) {โยนข้อผิดพลาดใหม่ ("XMLHTTPREQUEST ไม่รองรับ"); }}}}}} // รับฟังก์ชั่นการร้องขอ xhrget (url, callback) {var Request = ใหม่ XMLHTTPREQUEST (); request.open ('get', url, true); request.onreadyStateChange = function () {ถ้า (request.readyState === 4 && request.status == 200) {callback && callback (request.responsetext); - request.send (null);} // ฟังก์ชั่นการร้องขอโพสต์ xhrpost (url, data, callback) {var request = ใหม่ xmlhttprequest (); request.open ('โพสต์', url, true); request.setRequestHeader ('ประเภทเนื้อหา', 'แอปพลิเคชัน/json'); request.onreadyStateChange = function () {ถ้า (request.readyState === 4 && request.status == 200) {callback && callback (คำขอ); - request.send (json.stringfy (data));}นี่คือการใช้ XMLHTTPREQUEST แบบดั้งเดิม XMLHTTTPREQUEST ระดับ 2 เสนอวิธีการใหม่ ๆ มากมายและ CORS ที่เรามักจะพูดถึงก็มาจากวิธีนี้
หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ XHR2 ที่แนะนำคู่มือผู้ใช้ XMLHTTTPRequest ระดับ 2
3 ประเด็นข้ามโดเมน
เมื่อเราขอข้อมูลจากเซิร์ฟเวอร์อื่น ๆ ผ่าน AJAX บนหน้าเว็บลูกค้าจะมีปัญหาข้ามโดเมนเนื่องจากนโยบายที่คล้ายคลึงกันของเบราว์เซอร์สำหรับ JavaScript นโยบายที่เรียกว่าต้นกำเนิดที่เรียกว่าสคริปต์ที่สามารถขอทรัพยากรจากแหล่งเดียวกัน (ชื่อโดเมนเดียวกันหมายเลขพอร์ตโปรโตคอล)
หากที่อยู่บริการที่ร้องขอโดย XMLHTTPREQUEST ด้านบนจะแตกต่างจากไฟล์ปัจจุบันข้อผิดพลาดต่อไปนี้จะปรากฏในเบราว์เซอร์:
แล้ววิธีแก้ปัญหาข้ามโดเมนแบบนี้ได้อย่างไร?
(1) ใช้ CORS เพื่อข้ามโดเมน
"การแชร์ทรัพยากรข้ามแหล่งกำเนิด, cors สั้น ๆ ) cors เป็นความสามารถในการขยายใน xhr2 วิธีการใช้งานง่ายมากตั้งค่าบนฝั่งเซิร์ฟเวอร์:
ชุดส่วนหัวชุดการควบคุมการควบคุม-Origin *
การตั้งค่านี้จะยอมรับคำขอข้ามโดเมนสำหรับชื่อโดเมนทั้งหมดคุณยังสามารถระบุ URL เฉพาะหรือคุณสามารถ จำกัด ชื่อโดเมน:
ชุดส่วนหัว Access-Control-allo-Origin http://www.test.com
อย่างไรก็ตามข้อ จำกัด ของวิธีการนี้คือต้องใช้ไคลเอนต์เพื่อสนับสนุนและเซิร์ฟเวอร์เพื่อทำการตั้งค่าที่เกี่ยวข้อง เมื่อทั้งคู่พึงพอใจข้ามโดเมนผ่าน CORS ไม่เพียง แต่รองรับคำขอ HTTP ทุกประเภทเท่านั้น แต่ยังสามารถใช้ XMLHTTTPREQUEST ทั่วไปเพื่อเริ่มการร้องขอและรับข้อมูลซึ่งมีการจัดการข้อผิดพลาดที่ดีกว่า JSONP
(2) ใช้ JSONP เพื่อบรรลุการก้าวกระโดด
สำหรับเบราว์เซอร์รุ่นเก่าพวกเขามักจะไม่สนับสนุน CORS ดังนั้นการใช้ JSONP สำหรับข้ามโดเมนก็เป็นวิธีทั่วไปในการใช้ JSONP
เรารู้ว่าเมื่อโหลดสคริปต์เป้าหมายผ่านข้อกำหนด SRC ขององค์ประกอบ <Script> ในหน้าเว็บมันจะไม่ได้รับผลกระทบจากนโยบายต้นกำเนิดเดียวกันดังนั้นพวกเขาจึงสามารถใช้เพื่อขอข้อมูลจากเซิร์ฟเวอร์อื่น เทคโนโลยีนี้ที่ใช้องค์ประกอบ <Script> เป็นการส่ง AJAX เรียกว่า JSONP
หลักการของการใช้งาน JSONP มีดังนี้:
ฟังก์ชั่น getjsonp (url, callback) {var funcname = getUniquename (); // ใช้การประทับเวลาหรืออ้างอิงตัวนับอัตโนมัติเพื่อรับชื่อฟังก์ชั่นที่ไม่ซ้ำกัน url + = "? callback =" + funcname; // เพิ่มชื่อฟังก์ชันเป็นพารามิเตอร์ไปยัง URL var script = document.createElement ('script'); // สร้างแท็กสคริปต์แบบไดนามิก // ฟังก์ชั่นการเรียกกลับ getJSONP [funcName] = ฟังก์ชั่น (การตอบกลับ) {ลอง {callback (ตอบกลับ); // ข้อมูลการตอบสนองกระบวนการ} ในที่สุด {// แม้ว่าฟังก์ชั่นการเรียกกลับหรือการตอบกลับจะเกิดข้อผิดพลาดให้ล้างเนื้อหาที่เพิ่มขึ้นอย่างไดนามิกลบ getJSONP [funcName]; script.parentNode.removeChild (Scipt); }} // ทริกเกอร์ http request script.src = url; document.body.appendchild (สคริปต์); -JSONP ยังมีข้อเสียบางอย่าง ก่อนอื่น JSONP รองรับ Get แต่ไม่รองรับวิธีการโพสต์ นอกจากนี้ยังใช้คำขอ AJAX โดยใช้องค์ประกอบ <Script> ซึ่งหมายความว่าเว็บเพจสามารถเรียกใช้รหัส JavaScript ใด ๆ ที่ส่งโดยเซิร์ฟเวอร์ระยะไกล ดังนั้นเทคโนโลยีนี้ไม่ควรใช้สำหรับเซิร์ฟเวอร์ที่ไม่ไว้วางใจ
(3) ใช้ window.name เพื่อข้ามโดเมน
วัตถุหน้าต่างมีแอตทริบิวต์ชื่อซึ่งมีคุณสมบัติ: นั่นคือในช่วงวงจรชีวิตของหน้าต่างทุกหน้าที่โหลดโดยหน้าต่างแชร์ window.name และแต่ละหน้ามีการอ่านและเขียนสิทธิ์ใน window.name window.name ยังคงมีอยู่ในทุกหน้าที่โหลดโดยหน้าต่างและจะไม่ถูกรีเซ็ตเนื่องจากการโหลดหน้าใหม่ ดังนั้นข้อมูลสามารถส่งผ่านหน้าเว็บจากแหล่งต่าง ๆ ด้วย window.name
หาก www.a.com/a.html ต้องการรับข้อมูลใน www.b.com/b.html หลักการมีดังนี้:
a) จัดเก็บข้อมูลใน window.name ใน b.html
b) สร้างแท็ก IFRAME ที่ซ่อนอยู่ (ไม่มี) IFRAME ใน A.HTML โดยสมมติว่า ID ถูกตั้งค่าเป็นพร็อกซีและ SRC ถูกตั้งค่าเป็นแหล่งกำเนิดเดียวกับ A.HTML
c) รับข้อมูลใน A.HTML ผ่านรหัสต่อไปนี้
var proxy = document.getElementById ('พร็อกซี'); proxy.onload = function () {var data = proxy.contentwindow.name; // get data}d) ลบองค์ประกอบที่เกี่ยวข้อง
(4) ใช้ window.postmessage เพื่อข้ามโดเมน
วิธีนี้ค่อนข้างง่าย ในหน้า A ให้ใช้ WindowoBJ.PostMessage (ข้อความ Targetorigin) เพื่อส่งข้อมูลไปยังหน้าเป้าหมายและในหน้า B ข้อมูลจะได้รับจากการฟังเหตุการณ์ข้อความ วิธีนี้เป็นวิธีใหม่ใน HTML5 และไม่สามารถใช้สำหรับเบราว์เซอร์รุ่นเก่าเช่น IE6 และ IE7
4 วิธีปรับปรุงประสิทธิภาพของเว็บไซต์
โปรดดูบทความอีกสองบทความของบล็อกเกอร์:
คำแนะนำบางประการเกี่ยวกับการปรับปรุงประสิทธิภาพของเว็บไซต์
คำแนะนำบางอย่างเกี่ยวกับการปรับปรุงประสิทธิภาพของเว็บไซต์ 2
เนื้อหาใหม่จะได้รับการอัปเดตอย่างต่อเนื่อง ...
บล็อกผู้แต่ง: Vicfeel