หน้าอ้างอิงนี้จะอธิบายเกี่ยวกับ Intermediate Iframe Support JavaScript API ซึ่งช่วยให้คุณปรับเปลี่ยน iframe ระดับกลางใน UX ที่ตามมาได้
ดูคู่มือผสานรวม One Tap โดยใช้ Iframe เพื่อเรียนรู้วิธีใช้ iframe สื่อกลาง
ตารางต่อไปนี้แสดงเมธอดที่ใช้ได้ทั้งหมดและลักษณะการทำงาน
| วิธีการ | |
|---|---|
verifyParentOrigin |
ดำเนินการยืนยันต้นทางระดับบนสุด |
notifyParentClose |
แจ้งเฟรมหลักที่มีการข้ามขั้นตอน One Tap UX |
notifyParentDone |
แจ้งเฟรมหลักว่าขั้นตอน One Tap 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.notifyParentResize
เมธอด google.accounts.id.intermediate.notifyParentResize จะแจ้งเฟรมหลักให้ปรับขนาด iframe ระดับกลาง ดูตัวอย่างโค้ดของเมธอดต่อไปนี้
google.accounts.id.intermediate.notifyParentResize(height)
ส่วนสูง
ความสูงใหม่ในหน่วยพิกเซล นี่เป็นฟิลด์ที่ต้องระบุ ค่าต้องไม่เป็นจำนวนลบ
หากพารามิเตอร์ความสูงมากกว่า 0 iframe ตัวกลางจะตั้งค่าเป็นความสูงใหม่ ถ้าพารามิเตอร์ความสูงเป็น 0 iframe ตัวกลางจะมองไม่เห็น iframe ที่ซ่อนอยู่จะไม่ปิด ซึ่งจะแสดงในภายหลังได้ด้วย การเรียกใช้วิธีการปรับขนาดอื่น
วิธีการ: google.accounts.id.intermediate.notifyParentTabOutsideMode
เมธอด google.accounts.id.intermediate.notifyParentTapOutsideMode จะแจ้งเฟรมหลักว่าจะยกเลิก iframe กลางเมื่อผู้ใช้คลิกนอก iframe กลาง ดูตัวอย่างโค้ดของเมธอดต่อไปนี้
google.accounts.id.intermediate.notifyParentTapOutsideMode(cancel)
ยกเลิก
ค่าบูลีนที่จำเป็นนี้จะระบุว่าจะยกเลิก iframe กลางเมื่อผู้ใช้คลิกนอก iframe ตรงกลาง