เว็บไซต์ข่าวเช่น Forbes / Zdnet ต่อเนื่องผสานหน้าเว็บหนึ่งเข้ากับอีกหน้าหนึ่งได้อย่างไร

ถ้าคุณไปที่ Eg:

เมื่อคุณไปถึงด้านล่างของหน้าเรื่องใหม่จะโหลดและ URL ในอินเทอร์เน็ตเบราว์เซอร์ของฉันเปลี่ยนเป็น URL ของเรื่องข่าวถัดไปนี้ ดังนั้นฉันจึงสงสัยว่าหน้าเว็บใดที่จะสามารถโหลดหน้าเว็บถัดไปได้ในทันทีโดยมีความล่าช้าเล็กน้อยระหว่างหน้าเว็บ พวกเขาเป็นตัวอย่างก่อนการดาวน์โหลดเว็บเพจของเรื่องข่าวถัดไปแล้วโหลดหน้าเว็บอย่างรวดเร็วจริง ๆ ?

— zordman
แหล่งที่มา

กดปุ่มค้างไว้Endและคุณจะเห็นกระบวนการโหลดล่าช้า

— MonkeyZeus

คำถามที่สำคัญกว่าคือทำไมพวกเขาทำ

คำตอบ:

คำตอบสั้น ๆ คือรหัส Javascript ฝั่งไคลเอ็นต์ของหน้าตรวจพบเมื่อคุณได้รับ "เกินไป" ที่ด้านล่างของหน้าและถามเซิร์ฟเวอร์สำหรับข้อมูลเพิ่มเติมเมื่อที่เกิดขึ้น

พวกเขาจะไม่โหลดหน้าเว็บทั้งหมด แทนที่จะใช้รหัส Javascript ในหน้านั้นขอข้อมูลเพิ่มเติมจากเซิร์ฟเวอร์จากนั้นเมื่อได้รับข้อมูลใหม่จะเพิ่มข้อมูลนั้นไปยังหน้าปัจจุบัน ส่วนต่างๆของหน้าเว็บที่ไม่จำเป็นต้องเปลี่ยนแปลงจะยังคงไม่เปลี่ยนแปลงอย่างสมบูรณ์

วิธีที่ทันสมัยที่สุดในการทำเช่นนี้คือการใช้คุณสมบัติการแก้ไขประวัติ HTML5ซึ่งดูเหมือนจะเป็นสิ่งที่ไซต์เหล่านั้นใช้

— Ixrec
แหล่งที่มา

คำอธิบายของคุณไม่มีขั้นตอน: ที่ซึ่งพวกเขาเปลี่ยนประวัติจริงรวมถึงการเพิ่มข้อมูลเพิ่มเติมลงในหน้า ซึ่งทำให้ "วิธีที่ทันสมัยที่สุดในการทำสิ่งนี้ " ที่น่าอึดอัดใจเพราะนี่หมายถึงกระบวนการแก้ไขประวัติซึ่งไม่ได้กล่าวถึงจริงในคำตอบ (ตามหลักไวยากรณ์นี่หมายถึงการไม่เปลี่ยนแปลงส่วนที่เหลือของหน้าหรืออาจเพิ่มข้อมูลในหน้าซึ่งโดยทั่วไปแล้วจะทำกับ AJAX และไม่สามารถทำได้ด้วยคุณสมบัติการแก้ไขประวัติ HTML5)

— KRyan

แล้วการเปลี่ยน URL จะเกิดอะไรขึ้นถ้าไม่บังคับให้โหลดซ้ำ? เนื่องจากบนลิงก์ของคุณหากคุณโหลด 'หน้าเว็บที่มีการแก้ไข' (เช่น/second) มันจะเกิดข้อผิดพลาด สิ่งนี้ไม่ได้เกิดขึ้นกับเว็บไซต์ข่าวของ OP พวกเขาเปลี่ยน URL อย่างแม่นยำเพื่อให้คุณสามารถแชร์ได้

— OJFord

@OllieFord นั่นคือสิ่งที่ประวัติ API ใช้สำหรับ history.pushStateและhistory.replaceStateให้คุณเปลี่ยน URL ในแถบที่อยู่โดยไม่ต้องออกไปจากหน้าปัจจุบัน มันเป็นการแทนที่วิธีที่เก่ากว่าในการเปลี่ยนชิ้นส่วน URL ( #something) โดยมีข้อได้เปรียบที่สำคัญคือ API ประวัติให้คุณกด URL "ของจริง" ที่เซิร์ฟเวอร์สามารถมีส่วนร่วมในการสร้างได้ จากฝั่งไคลเอ็นต์

— hobbs

อ่าโอเค. แต่อย่างที่ฉันพูดการสาธิตเสียซึ่งทำให้เกิดความสับสน

— OJFord

ด้วยเหตุผลบางอย่างการสาธิตประวัติศาสตร์ที่ฉันคุ้นเคยก็ไม่สมบูรณ์เมื่อคำถามนี้เกิดขึ้นดังนั้นลิงก์นั้นเป็นลิงก์แรกที่ฉันพบว่าใช้งานได้จริง อย่าลังเลที่จะแนะนำลิงก์ที่ดีกว่า

— Ixrec

กุญแจสำคัญอย่างหนึ่งในการเข้าใจสิ่งที่เกิดขึ้น: เป็นไปได้ผ่านทาง Javascript เพื่อตั้งค่า URL ในแถบที่อยู่โดยไม่ต้องเปลี่ยนเส้นทางผู้ใช้จริง หากต้องการดูการทำงานนี้ให้วางโค้ดด้านล่างลงในคอนโซลของเบราว์เซอร์ที่รองรับ http://programmers.stackexchange.com/yay.htmlขอให้สังเกตว่ามันเปลี่ยนแปลงแถบที่อยู่ของคุณไป

history.pushState(null,null,'/yay.html')

ประโยชน์ของวิธีนี้คือหากผู้ใช้บุ๊กมาร์กหลังจากเลื่อนไปที่เรื่องแล้วบุ๊กมาร์กจะรู้ตำแหน่งที่จะส่งผู้ใช้ การเลื่อนดูผลการค้นหาอนันต์ของ DeviantArt เป็นตัวอย่างที่ดีของพฤติกรรมนี้

— ไบรอัน
แหล่งที่มา

รอสักครู่ DeviantArt ได้ทำการปรับเปลี่ยนประวัติในผลการค้นหาดังนั้นคุณสามารถเชื่อมโยงไปยัง / คั่นหน้า / บันทึกหน้าใดหน้าหนึ่งได้หรือไม่ นั่นคือ ... บางสิ่งบางอย่าง แต่ผลลัพธ์จะอยู่ในหน้าใดหน้าหนึ่งโดยเฉพาะสำหรับข้อความค้นหานั้น ๆ หากคุณคั่นหน้าฉันไม่คาดหวังว่าจะเห็นผลลัพธ์เดียวกันในหน้านั้นในวันพรุ่งนี้ ... ฉันต้องจำไว้ว่าให้ตรวจสอบสิ่งนี้

— KRyan

@Kyan มันเพิ่งแก้ไขoffsetพารามิเตอร์ที่ข้ามระยะทางที่แน่นอนลงใน resultset เนื่องจากลำดับการเรียงเริ่มต้นดูเหมือนจะ "เป็นที่นิยมตลอดเวลา" ผลลัพธ์อาจค่อนข้างคงที่ แต่ไม่แน่นอนถ้าคุณสลับลำดับการจัดเรียงเป็น "ใหม่ที่สุด" และค้นหาสิ่งที่เป็นที่นิยม

— hobbs