JavaScript API ของตัวกลางที่รองรับ iframe

หน้าอ้างอิงนี้อธิบายถึง 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 ระดับกลาง