Skip to main content

JavaScript Frameset 지원

이 문서는 Frameset 구조로 제작된 페이지에 코드 기반 적용 방법을 안내합니다.

1. 설치

1.1 초기화 코드 설정

frameset 태그가 있는 html에 초기화 코드를 삽입해주세요.

<html>
  <head>
    <script
      src="{{NF_AGENT_URL}}"
      data-nf-client-id="{CLIENT_ID}"
    ></script>
  </head>
  <body>
    <frameset rows="80px,*,50px">
      <frame name="navibar">
      <frame name="content">
      <frame name="footer">
    </frameset>
  </body>
</html>

1.2 넷퍼넬 함수 적용

1.2.1 넷퍼넬 함수에 frame 설정값 추가

nfStart, nfStartSection 함수의 파라미터에 frameName, useFrameBlock을 추가합니다.

keytype설명예시

frameName

string

넷퍼넬 대기실을 띄울 frame의 name 속성입니다.

"content"

useFrameBlock

boolean

넷퍼넬 대기실을 띄울 frame 외 나머지 frame을 block 처리합니다.

true

1.2.2 예시 코드

아래는 frame name이 navibar인 프레임 내의 버튼을 클릭했을 때, frame name이 content인 프레임에 대기실이 노출되도록 하는 예시입니다.

navibar.html
<html>
  <head>
    <!-- Head content -->
  </head>
  <body>
    <button onclick="clickPage1()">Page1</button>
    <!-- Other navigation elements -->
  </body>

  <script>
    function clickPage1() {
      top.nfStart(
        {
          projectKey: '{{PROJECT_KEY}}',
          segmentKey: '{{SEGMENT_KEY}}',
          frameName: 'content',
          useFrameBlock: true,
        },
        function (res) {
          switch (res.status) {
            case 'Success':
              top.frames['content'].location.href = 'page1.html';
              break;
            // ... other cases
          }
        }
      );
    }
  </script>
</html>