เอกสารอ้างอิง API ของ iframe ระดับกลาง

หน้านี้อธิบาย Intermediate iframe API ซึ่งใช้เพื่อฝังข้อความแจ้ง One Tap ลงในหน้าเว็บโดยใช้ iframe

ดูข้อมูลเพิ่มเติมเกี่ยวกับการทำงานกับ iframe ระดับกลางได้ที่ผสานรวม One Tap โดยใช้ iframe

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

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

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

HTML API

คุณโหลด iframe ระดับกลางได้โดยการรวมองค์ประกอบ HTML ที่มีแอตทริบิวต์ ID ตั้งค่าเป็น 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

แอตทริบิวต์นี้เป็นเมธอด Callback ของ JavaScript ที่ทริกเกอร์เมื่อ UX การแตะครั้งเดียว เสร็จสิ้น

โดยค่าเริ่มต้น ระบบจะโหลดหน้าเนื้อหาซ้ำเมื่อ 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 ดูข้อมูลเพิ่มเติมได้ในตารางต่อไปนี้

เสร็จสิ้น

ฟิลด์นี้คือเมธอด Callback ของ JavaScript ที่จะทริกเกอร์เมื่อ UX การแตะครั้งเดียว เสร็จสิ้น

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