หน้านี้อธิบาย JavaScript API สำหรับการรองรับ iframe ระดับกลาง ซึ่งใช้โดย One Tap เพื่อจัดการ iframe ระดับกลางใน UX ที่ตามมา
ดูคำแนะนำผสานรวม One Tap โดยใช้ Iframe เพื่อดูวิธีใช้ Iframe ระดับกลาง
ตารางต่อไปนี้แสดงเมธอดทั้งหมดที่ใช้ได้และลักษณะการทำงานของเมธอด
| เมธอด | |
|---|---|
verifyParentOrigin |
ดำเนินการยืนยันต้นทางหลัก |
notifyParentClose |
แจ้งเฟรมหลักว่ามีการข้ามขั้นตอน UX ของการแตะเพียงครั้งเดียว |
notifyParentDone |
แจ้งเฟรมหลักว่าขั้นตอน UX ของ One Tap เสร็จสมบูรณ์แล้ว |
notifyParentResize |
แจ้งเฟรมหลักให้ปรับขนาด iframe กลาง |
notifyParentTapOutsideMode |
แจ้งเฟรมหลักว่าจะยกเลิก iframe ระดับกลางหรือไม่ เมื่อผู้ใช้คลิกภายนอก iframe ระดับกลาง |
โหลดไลบรารี JavaScript สำหรับการรองรับ iframe ระดับกลาง
วางข้อมูลโค้ดต่อไปนี้ลงในหน้า HTML ที่คุณต้องการโหลด iframe ระดับกลาง
<script src="https://accounts.google.com/gsi/intermediatesupport"></script>
เมธอด: google.accounts.id.intermediate.verifyParentOrigin
เมธอด google.accounts.id.intermediate.verifyParentOrigin จะดำเนินการ
การยืนยันต้นทางหลัก ดูตัวอย่างโค้ดของเมธอดต่อไปนี้
google.accounts.id.intermediate.verifyParentOrigin(
origins, verifiedCallback, verificationFailedCallback)
ตัวอย่างโค้ดต่อไปนี้แสดงวิธีแสดง UI หลังจากที่ยืนยันต้นทางหลักแล้วเท่านั้น
<script>
window.onload = () => {
google.accounts.id.intermediate.verifyParentOrigin(
"https://example.com", showUI, showError);
};
</script>
ตารางต่อไปนี้แสดงพารามิเตอร์
| พารามิเตอร์ | |
|---|---|
origins |
ต้นทางที่ได้รับอนุญาตให้ฝัง iframe ระดับกลาง |
verifiedCallback |
เมธอด Callback ของ JavaScript จะทริกเกอร์เมื่อระบบอนุญาตให้ต้นทางหลักปัจจุบัน ฝัง iframe ระดับกลาง |
verificationFailedCallback |
เมธอด Callback ของ JavaScript จะทริกเกอร์เมื่อต้นทางของเฟรมหลักปัจจุบัน ไม่ได้รับอนุญาตให้ฝัง iframe ระดับกลาง |
ต้นกำเนิด
ต้นทางที่ได้รับอนุญาตให้ฝัง iframe ระดับกลาง ดูข้อมูลเพิ่มเติมได้ในตารางต่อไปนี้
| ประเภท | ต้องระบุ | ตัวอย่าง |
|---|---|---|
| สตริง อาร์เรย์สตริง หรือฟังก์ชัน | ไม่บังคับ | allowed_parent_origin: "https://example.com" |
ตารางต่อไปนี้แสดงประเภทค่าที่รองรับและคำอธิบาย
| ประเภทค่า | ||
|---|---|---|
string |
URI โดเมนเดียว | "https://example.com" |
string array |
อาร์เรย์ของ URI โดเมน | "https://news.example.com,https://local.example.com" |
verifiedCallback
ฟิลด์นี้เป็นเมธอด Callback ของ JavaScript ที่ทริกเกอร์เมื่อต้นทางของเฟรมหลักปัจจุบันได้รับอนุญาตให้ฝัง iframe ระดับกลาง
verificationFailedCallback
ฟิลด์นี้เป็นเมธอด Callback ของ JavaScript ที่ทริกเกอร์เมื่อไม่อนุญาตให้ต้นทางของหน้าหลักปัจจุบัน ฝัง iframe ระดับกลาง
เมธอด: google.accounts.id.intermediate.notifyParentClose
เมธอด google.accounts.id.intermediate.notifyParentClose จะแจ้งเฟรมหลักให้ปิด iframe ระดับกลางเมื่อข้ามโฟลว์ UX ของการแตะหนึ่งครั้ง ดูตัวอย่างโค้ดของเมธอดต่อไปนี้
google.accounts.id.intermediate.notifyParentClose()
เมธอด: google.accounts.id.intermediate.notifyParentDone
เมธอด google.accounts.id.intermediate.notifyParentClose จะแจ้งเฟรมหลักให้ปิด iframe กลางและรีเฟรชสถานะการเข้าสู่ระบบ ดูตัวอย่างโค้ดของเมธอดได้ที่ด้านล่าง
google.accounts.id.intermediate.notifyParentDone()
เมธอด: google.accounts.id.intermediate.notifyParentResize
google.accounts.id.intermediate.notifyParentResize เมธอดจะแจ้งเฟรมหลักให้ปรับขนาด iframe กลาง ดูตัวอย่างโค้ดต่อไปนี้
ของเมธอด
google.accounts.id.intermediate.notifyParentResize(height)
ส่วนสูง
ความสูงใหม่ในหน่วยพิกเซล นี่เป็นฟิลด์ที่ต้องระบุ ค่าต้องเป็นตัวเลขที่ไม่ใช่ค่าลบ
หากพารามิเตอร์ความสูงมากกว่า 0 ระบบจะตั้งค่า iframe ระดับกลางเป็นความสูงใหม่ หากพารามิเตอร์ความสูงเป็น 0 iframe กลางจะ มองไม่เห็น ไม่ได้ปิด iframe ที่ซ่อนไว้ โดยจะแสดงในภายหลังได้ด้วยการเรียกใช้เมธอด การปรับขนาดอื่น
เมธอด: google.accounts.id.intermediate.notifyParentTapOutsideMode
เมธอด google.accounts.id.intermediate.notifyParentTapOutsideMode จะแจ้งให้เฟรมหลักทราบว่าจะยกเลิก iframe ระดับกลางหรือไม่เมื่อผู้ใช้คลิกนอก iframe ระดับกลาง ดูตัวอย่างโค้ดของเมธอดต่อไปนี้
google.accounts.id.intermediate.notifyParentTapOutsideMode(cancel)
ยกเลิก
ค่าบูลีนที่จำเป็นนี้จะระบุว่าจะยกเลิก iframe ระดับกลางหรือไม่ เมื่อผู้ใช้คลิกนอก iframe ระดับกลาง