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

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

ป้ายข้อมูล

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

data-done

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

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

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 ระดับกลางสำหรับการแตะครั้งเดียว ดูข้อมูลเพิ่มเติมได้ในตารางต่อไปนี้

เสร็จสิ้น

ช่องนี้เป็นเมธอด Callback ที่เป็น JavaScript ที่จะทริกเกอร์เมื่อ One Tap UX เสร็จสิ้น

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