[Nuxt3 | Vue] iframe 사용 이슈

🌐 웹개발

[Nuxt3 | Vue] iframe 사용 이슈

두_두 2025. 2. 14. 13:39

1. iframe 내부인지 외부인지 판별하기

같은 코드여도 iframe 내부에서의 동작과 외부에서의 동작을 구분해야 하는 경우가 있다.

if (window.self !== window.top) {
    // iframe 내부에서 실행될 함수
} else {
    // iframe 안에 있지 않음!
}

2. 로드 후 onMounted, onNuxtReady 실행 안됨

iframe 내에서 주소 이동을 했을 때 바로 실행되는 함수를 만들기 위해 onNuxtReady, onMounted를 사용해도 적용되지 않았다. ➡️ iframe의 src가 변경되면, iframe 내부에서는 Nuxt의 초기화가 다시 실행되지 않기 때문에 onNuxtReady가 실행되지 않는다.

따라서 iframe에 @load를 추가하여 iframe이 로드된 후 실행될 수 있도록 코드를 작성해야 한다.

예시 코드:

<template>
  <div>
    <iframe ref="iframeEl" :src="iframeSrc" @load="onIframeLoad" width="600" height="400"></iframe>
  </div>
</template>

<script setup>
import { ref } from "vue";

const iframeSrc = ref("https://example.com");

const onIframeLoad = () => {
  console.log("iframe이 완전히 로드됨!");
};
</script>