เอกสารอ้างอิง API คอมโพเนนต์ที่ไม่ใช่ AMP

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

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

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

data-src

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

ประเภท จำเป็น ตัวอย่าง
สตริง ได้ data-src="https://example.com/onetap_iframe.html"

ข้อมูลเสร็จสิ้น

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

ระบบจะโหลดหน้าเนื้อหาซ้ําเมื่อ 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.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 UX

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

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