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

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

โหลดไลบรารี 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 อย่าใส่รหัสนี้ในหลาย องค์ประกอบ

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

ข้อมูล-src

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

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

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

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

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 โปรดดูข้อมูลเพิ่มเติมในตารางต่อไปนี้

เสร็จสิ้น

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

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