หน้าอ้างอิงนี้อธิบายถึง JavaScript API ของตัวกลางที่รองรับ ซึ่งช่วยให้คุณจัดการ iframe ระดับกลางใน UX ที่ตามมาได้
ตารางต่อไปนี้แสดงวิธีที่มีอยู่ทั้งหมดและลักษณะการทํางาน
| วิธีการ | |
|---|---|
verifyParentOrigin |
ดําเนินการยืนยันต้นทางระดับบนสุด |
notifyParentClose |
แจ้งเตือนเฟรมระดับบนที่การข้าม UX ของ One Tap ข้าม |
notifyParentDone |
แจ้งเตือนเฟรมระดับบนที่โฟลว์การแตะ UX เสร็จสิ้น |
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 |
เมธอดเรียกกลับของ JavaScript ที่จะทริกเกอร์เมื่อต้นทางหลักปัจจุบันได้รับอนุญาตให้ฝัง iframe ระดับกลาง |
verificationFailedCallback |
เมธอดเรียกกลับของ 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" |
ยืนยันการเรียกกลับ
ช่องนี้เป็นวิธีเรียกกลับของ JavaScript ที่จะแสดงขึ้นเมื่อต้นทางหลักปัจจุบันอนุญาตให้ฝัง iframe ระดับกลางได้
การยืนยันล้มเหลว
ช่องนี้เป็นวิธีเรียกกลับของ JavaScript ที่จะทริกเกอร์เมื่อต้นทางหลักปัจจุบันฝัง iframe ระดับกลางไม่ได้
เมธอด: google.accounts.id.intermediate.notifyParentClose
เมธอด google.accounts.id.intermediate.notifyParentClose จะแจ้งเตือนเฟรมหลักเพื่อปิด iframe ระหว่างกลางเมื่อมีการข้ามโฟลว์ One Tap 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.notifyParentFormat
เมธอด 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 ระดับกลาง