คลาส google.script.history (API ฝั่งไคลเอ็นต์)
จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
google.script.history เป็น JavaScript API ฝั่งไคลเอ็นต์แบบไม่พร้อมกันซึ่งโต้ตอบได้
ด้วยสแต็กประวัติการเข้าชมของเบราว์เซอร์ ใช้ได้เฉพาะในบริบทของเว็บแอปที่ใช้
IFRAME
ไม่ได้มีไว้สำหรับใช้กับแถบด้านข้างและกล่องโต้ตอบในส่วนเสริม หรือ
และบริบทสคริปต์คอนเทนเนอร์ สำหรับข้อมูลเพิ่มเติม โปรดดู
คู่มือการใช้เบราว์เซอร์
ในเว็บแอป
เอกสารโดยละเอียด
push(stateObject, params, hash)
พุชออบเจ็กต์สถานะ พารามิเตอร์ของ URL และส่วนย่อยของ URL ที่ระบุไปยังประวัติเบราว์เซอร์
สแต็ก ออบเจ็กต์สถานะเป็นออบเจ็กต์ JavaScript แบบง่ายที่กำหนดโดยนักพัฒนาซอฟต์แวร์และสามารถ
มีข้อมูลที่เกี่ยวข้องกับสถานะปัจจุบันของแอป วิธีการนี้คล้ายคลึงกับ
pushState()
JavaScript
Index.html
var now = new Date();
var state = {
'timestamp': now.getTime()
};
var params = {
'options': "none"
};
google.script.history.push(state, params, "anchor1");
พารามิเตอร์
| ชื่อ | ประเภท | คำอธิบาย |
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");
พารามิเตอร์
| ชื่อ | ประเภท | คำอธิบาย |
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)
ตั้งค่าฟังก์ชัน Callback เพื่อตอบสนองต่อการเปลี่ยนแปลงในประวัติเบราว์เซอร์ ฟังก์ชัน Callback
ควรใช้ออบเจ็กต์เหตุการณ์เพียงรายการเดียวเป็นอาร์กิวเมนต์
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...
});
พารามิเตอร์
| ชื่อ | ประเภท | คำอธิบาย |
function | Function | ฝั่งไคลเอ็นต์
ฟังก์ชัน Callback ที่จะเรียกใช้ตามเหตุการณ์การเปลี่ยนแปลงประวัติ โดยใช้
event object เป็นอาร์กิวเมนต์เดียว
|
ออบเจ็กต์เหตุการณ์
| ช่อง |
e.state |
ออบเจ็กต์สถานะที่เชื่อมโยงกับเหตุการณ์ที่ป๊อปอัป ออบเจ็กต์นี้เหมือนกับสถานะ
ที่ใช้ใน push() ที่เกี่ยวข้องหรือ
เมธอด replace() ที่เพิ่มสถานะ POP แล้ว
ในกองประวัติ
{"page":2, "name":"Wilbur"}
|
e.location |
ออบเจ็กต์ตำแหน่ง
ที่เชื่อมโยงกับเหตุการณ์ที่ป๊อปอัป
{"hash":"", "parameter":{"name": "alice", "n": "1"}, "parameters":{"name": ["alice"], "n": ["1", "2"]}}
|
เนื้อหาของหน้าเว็บนี้ได้รับอนุญาตภายใต้ใบอนุญาตที่ต้องระบุที่มาของครีเอทีฟคอมมอนส์ 4.0 และตัวอย่างโค้ดได้รับอนุญาตภายใต้ใบอนุญาต Apache 2.0 เว้นแต่จะระบุไว้เป็นอย่างอื่น โปรดดูรายละเอียดที่นโยบายเว็บไซต์ Google Developers Java เป็นเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2025-07-26 UTC
[null,null,["อัปเดตล่าสุด 2025-07-26 UTC"],[[["\u003cp\u003e\u003ccode\u003egoogle.script.history\u003c/code\u003e enables interaction with the browser history stack within web apps using \u003ccode\u003eIFRAME\u003c/code\u003e.\u003c/p\u003e\n"],["\u003cp\u003eIt provides methods to push, replace, and monitor browser history state, including URL parameters and fragments.\u003c/p\u003e\n"],["\u003cp\u003eDevelopers can define custom state objects to store and retrieve application-specific data associated with history events.\u003c/p\u003e\n"],["\u003cp\u003eA change handler can be set to trigger a callback function in response to history changes, allowing dynamic UI updates.\u003c/p\u003e\n"]]],[],null,["# Class google.script.history (Client-side API)\n\n`google.script.history` is an asynchronous client-side JavaScript API that can interact\nwith the browser history stack. It can only be used in the context of a web app that uses\n[`IFRAME`](/apps-script/reference/html/sandbox-mode#properties).\nIt is not intended for use with sidebars and dialogs in an add-on or\ncontainer-script context. For more information, see the\n[guide to using browser\nhistory in web apps](/apps-script/guides/web#web_apps_and_browser_history). \n\n### Methods\n\n| Method | Return type | Brief description |\n|----------------------------------------------------------------------|-------------|----------------------------------------------------------------------------------------------------------------------|\n| [push(stateObject, params, hash)](#push(Object,Object,String)) | `void` | Pushes the provided state object, URL parameters and URL fragment onto the browser history stack. |\n| [replace(stateObject, params, hash)](#replace(Object,Object,String)) | `void` | Replaces the top event on the browser history stack with the provided state object, URL parameters and URL fragment. |\n| [setChangeHandler(function)](#setChangeHandler(Function)) | `void` | Sets a callback function to respond to changes in the browser history |\n\nDetailed documentation\n----------------------\n\n### `push(stateObject, params, hash)`\n\nPushes the provided state object, URL parameters and URL fragment onto the browser history\nstack. The state object is a simple JavaScript Object that is defined by the developer and can\ncontain any data relevant to the app's current state. This method is analogous to the\n[pushState()](https://developer.mozilla.org/en-US/docs/Web/API/History_API#The_pushState()_method)\nJavaScript method. \n\n### Index.html\n\n```html\nvar now = new Date();\nvar state = {\n 'timestamp': now.getTime()\n};\nvar params = {\n 'options': \"none\"\n};\ngoogle.script.history.push(state, params, \"anchor1\");\n```\n\n#### Parameters\n\n| Name | Type | Description |\n|---------------|----------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `stateObject` | `Object` | An developer-defined object to be associated with a browser history event, and which resurfaces when the state is popped. Typically used to store application state information (such as page data) for future retrieval. |\n| `params` | `Object` | An object containing URL parameters to associate with this state. For example, `{foo: \"bar\", fiz: \"baz\"}` equates to `\"?foo=bar&fiz=baz\"`. Alternatively, arrays can be used: `{foo: [\"bar\", \"cat\"], fiz: \"baz\"}` equates to `\"?foo=bar&foo=cat&fiz=baz\"`. If null or undefined, the current URL parameters are not changed. If empty, the URL parameters are cleared. |\n| `hash` | `String` | The string URL fragment appearing after the '#' character. If null or undefined, the current URL fragment is not changed. If empty, the URL fragment is cleared. |\n\n*** ** * ** ***\n\n*** ** * ** ***\n\n### `replace(stateObject, params, hash)`\n\nReplaces the top event on the browser history stack with the provided (developer-defined) state\nobject, URL parameters and URL fragment. This is otherwise identical to\n[push()](#push(Object,Object,String)). \n\n### Index.html\n\n```html\nvar now = new Date();\nvar state = {\n 'timestamp': now.getTime()\n};\nvar params = {\n 'options': \"none\"\n};\ngoogle.script.history.replace(state, params, \"anchor1\");\n```\n\n#### Parameters\n\n| Name | Type | Description |\n|---------------|----------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `stateObject` | `Object` | An developer-defined object to be associated with a browser history event, and which resurfaces when the state is popped. Typically used to store application state information (such as page data) for future retrieval. |\n| `params` | `Object` | An object containing URL parameters to associate with this state. For example, `{foo: \"bar\", fiz: \"baz\"}` equates to `\"?foo=bar&fiz=baz\"`. Alternatively, arrays can be used: `{foo: [\"bar\", \"cat\"], fiz: \"baz\"}` equates to `\"?foo=bar&foo=cat&fiz=baz\"`. If null or undefined, the current URL parameters are not changed. If empty, the URL parameters are cleared. |\n| `hash` | `String` | The string URL fragment appearing after the '#' character. If null or undefined, the current URL fragment is not changed. If empty, the URL fragment is cleared. |\n\n*** ** * ** ***\n\n### `setChangeHandler(function)`\n\nSets a callback function to respond to changes in the browser history. The callback function\nshould take only a single [event object](#eventObject) as an argument.\n\n### Index.html\n\n```html\ngoogle.script.history.setChangeHandler(function (e) {\n console.log(e.state);\n console.log(e.location.parameters);\n console.log(e.location.hash);\n\n // Adjust web app UI to match popped state here...\n});\n```\n\n#### Parameters\n\n| Name | Type | Description |\n|------------|------------|----------------------------------------------------------------------------------------------------------------------------------|\n| `function` | `Function` | a client-side callback function to run upon a history change event, using the [event object](#eventObject) as the only argument. |\n\n#### Event object\n\n| Fields ||\n|--------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `e.state` | The state object associated with the popped event. This object is identical to the state object that used in the corresponding [push()](#push(Object,Object,String)) or [replace()](#replace(Object,Object,String)) method that added the popped state to the history stack. ``` {\"page\":2, \"name\":\"Wilbur\"} ``` |\n| `e.location` | A [location object](/apps-script/guides/html/reference/url#locationObject) associated with the popped event ``` {\"hash\":\"\", \"parameter\":{\"name\": \"alice\", \"n\": \"1\"}, \"parameters\":{\"name\": [\"alice\"], \"n\": [\"1\", \"2\"]}} ``` |\n\n*** ** * ** ***"]]
