디스커버리와 가까워지는 가장 빠른 방법

일반

<html>
  <head>
    <meta thisis="neweventpromotioncontent!@#">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
    <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard-dynamic-subset.css" />

    <style>
      @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard-dynamic-subset.css");
      * {
        font-family: "Pretendard";
      }

      body {
        margin: 0px;
        padding: 0px;
      }
      #container {
        position: relative;
        width: 100%;
      }
      .width-full {
        display: block;
        width: 100%;
      }
    </style>
  </head>

  <body>
    <div id="container">
      <div class="test-content">
        <img 
          class="width-full"
          src="https://cdn-onlinemall.discovery-expedition.com/cdn-cgi/image/format=auto,fit=contain,onerror=redirect/images/alimon_on_mobile_section_1.png"
        />
        <img
          class="width-full"
          src="https://cdn-onlinemall.discovery-expedition.com/cdn-cgi/image/format=auto,fit=contain,onerror=redirect/images/alimon_on_mobile_section_2.png"
        />
        <img
          class="width-full"
          src="https://cdn-onlinemall.discovery-expedition.com/cdn-cgi/image/format=auto,fit=contain,onerror=redirect/images/alimon_on_mobile_section_3.png"
        />
        <img
          id="section-bottom"
          class="width-full"
          src="https://cdn-onlinemall.discovery-expedition.com/cdn-cgi/image/format=auto,fit=contain,onerror=redirect/images/alimon_on_mobile_section_bottom.png"
        />
      </div>

      
      
    </div>
  </body>

  <script>
    const PARENT_BOTTOM_FIXED_CONTAINER_ID = 'alternative-iframe-bottom-fixed-container';
    const BOTTOM_FIXED_BUTTON_ID = 'event-iframe-bottom-fixed-button';

    document.addEventListener("DOMContentLoaded", function(event) {
      handleContainerResize();
    });

    function handleContainerResize() {
      function sendHeightToParent() {
        const visualArea = document.querySelector('#container');
        if (visualArea) {
          const containerHeight = visualArea.scrollHeight;
          window.parent.postMessage({ action: 'onResizeContentHeight', iframeHeight: containerHeight }, '*');
        }
      }

      function getIsAlreadyExistBottomFixedButton() {
        const elm = window.parent.document.querySelector(`#${BOTTOM_FIXED_BUTTON_ID}`);
        if (elm === null) {
          return false;
        } else {
          return true;
        }
      }

      function appendBottomFixedButtonToParent() {
        const isAlreadyExistBottomFixedButton = getIsAlreadyExistBottomFixedButton();
        if (isAlreadyExistBottomFixedButton === true) return;

        const fixedButtonElm = createFixedButton();
        const parentContainer = window.parent.document.querySelector(`#${PARENT_BOTTOM_FIXED_CONTAINER_ID}`);
        if (parentContainer === null) return;
        parentContainer.appendChild(fixedButtonElm);

        setTimeout(() => {
          handleStickyButton();
        }, 20);
      }

      function handleVisualAreaResize() {
        sendHeightToParent();
        appendBottomFixedButtonToParent();
      }

      sendHeightToParent();

      window.addEventListener('resize', handleVisualAreaResize);
    }

    function handleStickyButton() {
      const bottomFixedButton = window.parent.document.querySelector(`#${BOTTOM_FIXED_BUTTON_ID}`);
      const sectionBottom = document.querySelector('#section-bottom');

      const iframe = window.frameElement;

      window.parent.addEventListener('scroll', function() {
        const iframeRect = iframe.getBoundingClientRect();
        const sectionBottomRect = sectionBottom.getBoundingClientRect();

        const iframeBottom = iframeRect.bottom;
        const windowHeight = window.parent.innerHeight;

        const buttonBottom = iframeBottom - windowHeight -20;

        if(buttonBottom < sectionBottomRect.height) {
          bottomFixedButton.style.display = 'none';
        } else {
          bottomFixedButton.style.display = 'block';
        }
      })
    }

    function onClickLinkButton(url) {
      window.parent.postMessage({ action: 'onClickLink', url }, '*');
    }

    function createFixedButton() {
      const containerElm = document.createElement('div');
      containerElm.setAttribute('id', BOTTOM_FIXED_BUTTON_ID);
      containerElm.style.display = 'none';
      containerElm.style.width = '100%';
      containerElm.style.boxSizing = 'border-box';
      containerElm.style.padding = '32px 20px 16px 20px';
      containerElm.style.background = `
        linear-gradient(to bottom,
          rgba(255, 255, 255, 0) 0,
          rgba(255, 255, 255, 1) 100%
        )
      `;

      const buttonElm = document.createElement('button');
      buttonElm.addEventListener('click', () => onClickLinkButton('/mypage/user-info-management'));
      buttonElm.textContent = '수신 동의 바로가기';
      buttonElm.style.background = '#000';
      buttonElm.style.color = '#fff';
      buttonElm.style.fontFamily = 'Pretendard';
      buttonElm.style.fontSize = '16px';
      buttonElm.style.fontWeight = '400';
      buttonElm.style.outline = 'none';
      buttonElm.style.width = '100%';
      buttonElm.style.height = '64px';
      buttonElm.style.borderRadius = '8px';
      buttonElm.style.border = 'none';
      buttonElm.style.padding = '0';

      containerElm.appendChild(buttonElm);

      return containerElm;
    }

  </script>
</html>

<html>
<head>
    <meta thisis="neweventpromotioncontent!@#">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
    <link rel="stylesheet" as="style" crossorigin="" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard-dynamic-subset.css">
    <style>
        @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard-dynamic-subset.css");
        * {
            font-family: "Pretendard";
        }

        body {
            margin: 0px;
            padding: 0px;
            -ms-overflow-style: none;  /* IE and Edge */
            scrollbar-width: none;  /* Firefox */
        }
        body::-webkit-scrollbar {
            display: none;
        }
        #container {
            position: relative;
        }
        .width-full {
            display: block;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="container">
        
        

        <img class="width-full" src="https://cdn-onlinemall-stg.discovery-expedition.com/cdn-cgi/image/format=auto,fit=contain,onerror=redirect/images/chat_bot_section-top.png">
        <img class="width-full" src="https://cdn-onlinemall.discovery-expedition.com/cdn-cgi/image/format=auto,fit=contain,onerror=redirect/images/alimon_on_pc_section_2.png">
        <img class="width-full" src="https://cdn-onlinemall.discovery-expedition.com/cdn-cgi/image/format=auto,fit=contain,onerror=redirect/images/alimon_on_pc_section_3.png">
        <img id="section-bottom" class="width-full" src="https://cdn-onlinemall.discovery-expedition.com/cdn-cgi/image/format=auto,fit=contain,onerror=redirect/images/alimon_on_pc_section_bottom.png">
    </div>

    <script>
        const PARENT_BOTTOM_FIXED_CONTAINER_ID = 'alternative-iframe-bottom-fixed-container';
        const BOTTOM_FIXED_BUTTON_ID = 'event-iframe-bottom-fixed-button';

        document.addEventListener("DOMContentLoaded", function(event) {
            handleContainerResize();
        });

        function handleContainerResize() {
            function sendHeightToParent() {
                const visualArea = document.querySelector('#container');
                if (visualArea) {
                    const containerHeight = visualArea.scrollHeight;
                    window.parent.postMessage({ action: 'onResizeContentHeight', iframeHeight: containerHeight }, '*');
                }
            }

            function getIsAlreadyExistBottomFixedButton() {
                const elm = window.parent.document.querySelector(`#${BOTTOM_FIXED_BUTTON_ID}`);
                if (elm === null) {
                    return false;
                } else {
                    return true;
                }
            }

            function appendBottomFixedButtonToParent() {
                const isAlreadyExistBottomFixedButton = getIsAlreadyExistBottomFixedButton();
                if (isAlreadyExistBottomFixedButton === true) return;

                const fixedButtonElm = createFixedButton();
                const parentContainer = window.parent.document.querySelector(`#${PARENT_BOTTOM_FIXED_CONTAINER_ID}`);
                if (parentContainer === null) return;
                parentContainer.appendChild(fixedButtonElm);

                setTimeout(() => {
                    handleStickyButton();
                }, 20);
            }

            function handleVisualAreaResize() {
                sendHeightToParent();
                appendBottomFixedButtonToParent();
            }

            sendHeightToParent();

            window.addEventListener('resize', handleVisualAreaResize);
        }

        function handleStickyButton() {
            const bottomFixedButton = window.parent.document.querySelector(`#${BOTTOM_FIXED_BUTTON_ID}`);
            const sectionBottom = document.querySelector('#section-bottom');

            const iframe = window.frameElement;

            window.parent.addEventListener('scroll', function() {
                const iframeRect = iframe.getBoundingClientRect();
                const sectionBottomRect = sectionBottom.getBoundingClientRect();

                const iframeBottom = iframeRect.bottom;
                const windowHeight = window.parent.innerHeight;

                const buttonBottom = iframeBottom - windowHeight - 10;

                if(buttonBottom < sectionBottomRect.height) {
                    bottomFixedButton.style.display = 'none';
                } else {
                    bottomFixedButton.style.display = 'block';
                }
            })
        }

        function onClickLinkButton(url) {
            window.parent.postMessage({ action: 'onClickLink', url }, '*');
        }

        function createFixedButton() {
            const containerElm = document.createElement('div');
            containerElm.setAttribute('id', BOTTOM_FIXED_BUTTON_ID);
            containerElm.style.display = 'none';
            containerElm.style.position = 'fixed';
            containerElm.style.left = 0;
            containerElm.style.bottom = 0;
            containerElm.style.zIndex = 2;
            containerElm.style.width = '100%';
            containerElm.style.boxSizing = 'border-box';
            containerElm.style.padding = '32px 20px 24px 20px';
            containerElm.style.background = `
                linear-gradient(to bottom,
                    rgba(255, 255, 255, 0) 0,
                    rgba(255, 255, 255, 1) 100%
                )
            `;

            const buttonElm = document.createElement('button');
            buttonElm.addEventListener('click', () => onClickLinkButton('/mypage/user-info-management'));
            buttonElm.textContent = '수신 동의 바로가기';
            buttonElm.style.display = 'block';
            buttonElm.style.margin = 'auto';
            buttonElm.style.background = '#000';
            buttonElm.style.color = '#fff';
            buttonElm.style.fontFamily = 'Pretendard';
            buttonElm.style.fontSize = '1.146vw';
            buttonElm.style.fontWeight = '400';
            buttonElm.style.outline = 'none';
            buttonElm.style.width = '27.083vw';
            buttonElm.style.height = '4.688vw';
            buttonElm.style.borderRadius = '8px';
            buttonElm.style.border = 'none';
            buttonElm.style.padding = '0';
            buttonElm.style.cursor = 'pointer';

            containerElm.appendChild(buttonElm);

            return containerElm;
        }

    </script>
</body>
</html>