중급 Iframe API 참조

이 참조 페이지에서는 중간 iframe을 HTML 페이지에 로드하는 방법을 설명합니다.

중간 iframe JavaScript 라이브러리 로드

Google One 탭을 눌러 표시하려는 HTML 페이지에 다음 코드 스니펫을 배치합니다.

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

HTML API

ID 속성이 g_id_intermediate_iframe로 설정된 HTML 요소를 포함하여 중간 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>

ID가 'g_id_Middle_iframe'인 요소

중간 iframe 데이터 속성을 <div> 및 <span>와 같은 표시되거나 표시되지 않는 요소에 배치할 수 있습니다. 유일한 요구사항은 요소 ID를 g_id_intermediate_iframe로 설정하는 것입니다. 이 ID를 여러 요소에 적용하지 마세요.

다음 표에는 데이터 속성과 설명이 나와 있습니다.

data-src

이 속성은 원탭 중간 iframe의 URI입니다. 자세한 내용은 다음 표를 참고하세요.

데이터 완료

이 속성은 원탭 UX가 완료될 때 트리거되는 JavaScript 콜백 메서드입니다.

기본적으로 원탭 UX가 완료되면 콘텐츠 페이지가 새로고침됩니다. 자체 완료 콜백을 제공하여 기본 동작을 재정의할 수 있습니다. 자세한 내용은 다음 표를 참고하세요.

JavaScript API

JavaScript 메서드를 호출하여 중간 iframe을 로드할 수 있습니다.

메서드: google.accounts.id.initialIntermediate

google.accounts.id.initializeIntermediate 메서드는 구성 객체에 따라 중간 iframe을 로드합니다. 다음 메서드 코드 예를 참고하세요.

google.accounts.id.initializeIntermediate(IntermediateConfig)

다음 코드 예에서는 onload 함수와 함께 google.accounts.id.initializeIntermediate 메서드를 구현합니다.

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

데이터 유형: IntermediateConfig

다음 표에는 필드와 설명이 나와 있습니다.

src

이 입력란은 원탭 중간 iframe의 URI입니다. 자세한 내용은 다음 표를 참고하세요.

완료

이 필드는 원탭 UX가 완료될 때 트리거되는 JavaScript 콜백 메서드입니다.

기본적으로 원탭 UX가 완료되면 콘텐츠 페이지가 새로고침됩니다. 자체 완료 콜백을 제공하여 기본 동작을 재정의할 수 있습니다. 자세한 내용은 다음 표를 참고하세요.