คลาส google.script.history (API ฝั่งไคลเอ็นต์)

google.script.history เป็น JavaScript API ฝั่งไคลเอ็นต์แบบไม่พร้อมกันที่โต้ตอบกับสแต็กประวัติของเบราว์เซอร์ได้ ซึ่งใช้ได้เฉพาะในบริบทของเว็บแอปที่ใช้ IFRAME เท่านั้น ไม่ได้มีไว้ใช้กับแถบด้านข้างและกล่องโต้ตอบในบริบทส่วนเสริมหรือคอนเทนเนอร์สคริปต์ ดูข้อมูลเพิ่มเติมได้ในคำแนะนำการใช้ประวัติการท่องเว็บในเว็บแอป

วิธีการ

วิธีการ	ประเภทการแสดงผล	รายละเอียดแบบย่อ
push(stateObject, params, hash)	void	พุชออบเจ็กต์สถานะ, พารามิเตอร์ของ URL และส่วนย่อย URL ที่ให้ไว้ลงในสแต็กประวัติของเบราว์เซอร์
replace(stateObject, params, hash)	void	แทนที่เหตุการณ์ระดับบนสุดในสแต็กประวัติเบราว์เซอร์ด้วยออบเจ็กต์สถานะ พารามิเตอร์ของ URL และส่วนย่อย URL ที่ให้ไว้
setChangeHandler(function)	void	ตั้งค่าฟังก์ชันเรียกกลับเพื่อตอบสนองต่อการเปลี่ยนแปลงในประวัติของเบราว์เซอร์

เอกสารประกอบโดยละเอียด

push(stateObject, params, hash)

พุชออบเจ็กต์สถานะ, พารามิเตอร์ของ URL และส่วนย่อย URL ที่ให้ไว้ลงในสแต็กประวัติของเบราว์เซอร์ ออบเจ็กต์สถานะเป็นออบเจ็กต์ JavaScript แบบง่ายที่นักพัฒนาแอปกำหนดและอาจมีข้อมูลที่เกี่ยวข้องกับสถานะปัจจุบันของแอป เมธอดนี้คล้ายกับเมธอด JavaScript pushState()

Index.html

var now = new Date();
var state = {
  'timestamp': now.getTime()
};
var params = {
  'options': "none"
};
google.script.history.push(state, params, "anchor1");

พารามิเตอร์

ชื่อ	Type	คำอธิบาย
stateObject	Object	ออบเจ็กต์ที่นักพัฒนาแอปกำหนดที่จะเชื่อมโยงกับเหตุการณ์ประวัติของเบราว์เซอร์ และจะปรากฏขึ้นอีกครั้งเมื่อมีการเรียกสถานะ โดยทั่วไปจะใช้เพื่อจัดเก็บข้อมูลสถานะของแอปพลิเคชัน (เช่น ข้อมูลหน้าเว็บ) เพื่อการดึงข้อมูลในอนาคต
params	Object	ออบเจ็กต์ที่มีพารามิเตอร์ของ URL ที่จะเชื่อมโยงกับสถานะนี้ เช่น {foo: “bar”, fiz: “baz”} เท่ากับ "?foo=bar&fiz=baz" อีกทางเลือกหนึ่งคืออาร์เรย์ที่ใช้: {foo: [“bar”, “cat”], fiz: “baz”} เท่ากับ "?foo=bar&foo=cat&fiz=baz" หากเป็น Null หรือไม่ระบุ พารามิเตอร์ของ URL ปัจจุบันจะไม่เปลี่ยนแปลง หากเว้นว่างไว้ ระบบจะล้างพารามิเตอร์ของ URL
hash	String	ส่วนย่อยของ URL สตริงจะปรากฏหลังอักขระ "#" หาก Null หรือไม่ได้กำหนด ส่วนย่อย URL ปัจจุบันจะไม่เปลี่ยนแปลง หากเว้นว่างไว้ ระบบจะล้างส่วนย่อย URL

---

---

replace(stateObject, params, hash)

แทนที่เหตุการณ์ระดับบนสุดในสแต็กประวัติเบราว์เซอร์ด้วยออบเจ็กต์สถานะที่ระบุ (นักพัฒนาแอปกำหนด), พารามิเตอร์ของ URL และส่วนย่อย URL ซึ่งเหมือนกับ push()

Index.html

var now = new Date();
var state = {
  'timestamp': now.getTime()
};
var params = {
  'options': "none"
};
google.script.history.replace(state, params, "anchor1");

พารามิเตอร์

ชื่อ	Type	คำอธิบาย
stateObject	Object	ออบเจ็กต์ที่นักพัฒนาแอปกำหนดที่จะเชื่อมโยงกับเหตุการณ์ประวัติของเบราว์เซอร์ และจะปรากฏขึ้นอีกครั้งเมื่อมีการเรียกสถานะ โดยทั่วไปจะใช้เพื่อจัดเก็บข้อมูลสถานะของแอปพลิเคชัน (เช่น ข้อมูลหน้าเว็บ) เพื่อการดึงข้อมูลในอนาคต
params	Object	ออบเจ็กต์ที่มีพารามิเตอร์ของ URL ที่จะเชื่อมโยงกับสถานะนี้ เช่น {foo: “bar”, fiz: “baz”} เท่ากับ "?foo=bar&fiz=baz" อีกทางเลือกหนึ่งคืออาร์เรย์ที่ใช้: {foo: [“bar”, “cat”], fiz: “baz”} เท่ากับ "?foo=bar&foo=cat&fiz=baz" หากเป็น Null หรือไม่ระบุ พารามิเตอร์ของ URL ปัจจุบันจะไม่เปลี่ยนแปลง หากเว้นว่างไว้ ระบบจะล้างพารามิเตอร์ของ URL
hash	String	ส่วนย่อยของ URL สตริงจะปรากฏหลังอักขระ "#" หาก Null หรือไม่ได้กำหนด ส่วนย่อย URL ปัจจุบันจะไม่เปลี่ยนแปลง หากเว้นว่างไว้ ระบบจะล้างส่วนย่อย URL

---

setChangeHandler(function)

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

Index.html

google.script.history.setChangeHandler(function (e) {
  console.log(e.state);
  console.log(e.location.parameters);
  console.log(e.location.hash);

  // Adjust web app UI to match popped state here...
});

พารามิเตอร์

ชื่อ	Type	คำอธิบาย
function	Function	ฟังก์ชันเรียกกลับฝั่งไคลเอ็นต์ที่จะเรียกใช้กับเหตุการณ์การเปลี่ยนแปลงประวัติ โดยใช้ออบเจ็กต์เหตุการณ์เป็นอาร์กิวเมนต์เดียว

ออบเจ็กต์เหตุการณ์

ช่อง
e.state	ออบเจ็กต์สถานะที่เชื่อมโยงกับเหตุการณ์ที่เรียกดูแล้ว ออบเจ็กต์นี้เหมือนกับออบเจ็กต์สถานะที่ใช้ในเมธอด push() หรือ replace() ที่เกี่ยวข้อง ซึ่งเพิ่มสถานะที่ป๊อปเข้าไปในสแต็กประวัติ {"page":2, "name":"Wilbur"}
e.location	ออบเจ็กต์ตำแหน่งที่เชื่อมโยงกับเหตุการณ์ที่เรียกดู {"hash":"", "parameter":{"name": "alice", "n": "1"}, "parameters":{"name": ["alice"], "n": ["1", "2"]}}

---