เอกสารอ้างอิง Iframe API ตัวกลาง

หน้าอ้างอิงนี้จะอธิบายวิธีการโหลด iframe ขั้นกลางลงในหน้า HTML

หมายเหตุ: ดูข้อมูลพื้นฐานเกี่ยวกับ iframe ระดับกลาง

ที่ส่วนผสานรวม One Tap โดยใช้ Iframe

โหลดไลบรารี JavaScript ของ iframe ระดับกลาง

วางข้อมูลโค้ดต่อไปนี้ลงในหน้า HTML ที่ต้องการให้ Google One แตะเพื่อแสดง

<script src="https://accounts.google.com/gsi/intermediate"></script>

API แบบ HTML

คุณโหลด iframe กลางได้โดยการรวมองค์ประกอบ HTML ที่ตั้งค่าแอตทริบิวต์รหัสเป็น g_id_intermediate_iframe ดูตัวอย่างข้อมูลโค้ดต่อไปนี้

<script src="https://accounts.google.com/gsi/intermediate"></script>
<div id="g_id_intermediate_iframe"
     data-src="https://example.com/onetap_iframe.html">
</div>

องค์ประกอบที่มีรหัส "g_id_intermediate_iframe"

คุณใส่แอตทริบิวต์ข้อมูล iframe ระดับกลางในองค์ประกอบที่มองเห็นได้หรือไม่แสดงได้ เช่น <div> และ <span> ข้อกำหนดเพียงอย่างเดียวคือมีการตั้งค่ารหัสองค์ประกอบเป็น g_id_intermediate_iframe อย่าใส่รหัสนี้ในหลาย องค์ประกอบ

ตารางต่อไปนี้แสดงแอตทริบิวต์ข้อมูลพร้อมคำอธิบาย

แอตทริบิวต์
data-src	URI ของ iframe ระดับกลางของ One Tap
data-done	เมธอดโค้ดเรียกกลับของ JavaScript ที่จะทริกเกอร์เมื่อ One Tap UX เสร็จสิ้น

ข้อมูล-src

แอตทริบิวต์นี้คือ URI ของ iframe ระดับกลางของ One Tap โปรดดูข้อมูลเพิ่มเติมในตารางต่อไปนี้

ประเภท	ต้องระบุ	ตัวอย่าง
สตริง	มี	data-src="https://example.com/onetap_iframe.html"

การใช้ข้อมูลเสร็จสิ้น

แอตทริบิวต์นี้เป็นวิธีเรียกกลับของ JavaScript ที่ทริกเกอร์เมื่อ UX ของ One Tap เสร็จสิ้น

โดยค่าเริ่มต้น หน้าเนื้อหาจะโหลดซ้ำเมื่อ One Tap UX เสร็จสิ้น คุณลบล้างลักษณะการทำงานเริ่มต้นได้โดยการระบุโค้ดเรียกกลับที่ดำเนินการเสร็จสิ้นเอง ดูข้อมูลเพิ่มเติมในตารางต่อไปนี้

ประเภท	ต้องระบุ	ตัวอย่าง
การทำงาน	ไม่บังคับ	data-done="onOneTapSuccess"

JavaScript API

คุณสามารถโหลด iframe ระดับกลางโดยเรียกใช้เมธอด JavaScript

วิธีการ: google.accounts.id.initializeIntermediate

เมธอด google.accounts.id.initializeIntermediate จะโหลด iframe กลางโดยอิงตามออบเจ็กต์การกำหนดค่า ดูตัวอย่างโค้ดของวิธีการต่อไปนี้

google.accounts.id.initializeIntermediate(IntermediateConfig)

ตัวอย่างโค้ดต่อไปนี้ใช้เมธอด google.accounts.id.initializeIntermediate ที่มีฟังก์ชัน onload

<script>
  window.onload = function () {
    google.accounts.id.initializeIntermediate({
      src: 'https://example.com/intermediate'
    });
  };
</script>

ประเภทข้อมูล: IntermediateConfig

ตารางต่อไปนี้แสดงช่องต่างๆ พร้อมคำอธิบาย

ฟิลด์
src	URI ของ iframe ระดับกลางของ One Tap
done	เมธอดโค้ดเรียกกลับของ JavaScript ที่จะทริกเกอร์เมื่อ One Tap UX เป็นวิธีหนึ่ง

src

ช่องนี้คือ URI ของ iframe ระดับกลางของ One Tap โปรดดูข้อมูลเพิ่มเติมในตารางต่อไปนี้

ประเภท	ต้องระบุ	ตัวอย่าง
สตริง	มี	src: "https://example.com/onetap_iframe.html"

เสร็จสิ้น

ช่องนี้เป็นเมธอดโค้ดเรียกกลับของ JavaScript ที่จะทริกเกอร์เมื่อ One Tap UX เสร็จแล้ว

โดยค่าเริ่มต้น หน้าเนื้อหาจะโหลดซ้ำเมื่อ One Tap UX เสร็จสิ้น คุณลบล้างลักษณะการทำงานเริ่มต้นได้โดยการระบุโค้ดเรียกกลับที่ดำเนินการเสร็จสิ้นเอง ดูข้อมูลเพิ่มเติมในตารางต่อไปนี้

ประเภท	ต้องระบุ	ตัวอย่าง
การทำงาน	ไม่บังคับ	done: onOneTapSuccess