HTML iframe 이용해서 다른 사이트 가져오기

iframe 이란?

iframe은 다른 웹사이트나, 다른 HTML을 삽입할 때 사용합니다.

 

간단하게 이 포스트에 iframe을 이용하여서 카카오 지도를 올려보겠습니다.

 

 

map.kakao.com 사이트를 가지고 왔습니다.

 

아래와 같이 iframe 태그 내에 src 속성에 본인이 띄우고 싶은 사이트의 url을 작성하면

사이트를 띄울 수 있습니다.

 

네어버나, 구글 같은 경우에는 iframe으로 띄울 수 없게 막아 논 것 같습니다.

403 에러가 뜨더군요.

<iframe src="https://map.kakao.com" height="300" width="100%"></iframe>

 

src 속성 변경

src 속성을 변경하게 되면, 변경 된 url로 사이트가 변경되게 됩니다.

iframe에 내용을 변경할 수 도 있씁니다.

const frame = document.querySelector('iframe');
frame.setAttribute('src', 'https://www.tistory.com/');

 

load 이벤트

iframe에는 load 이벤트가 있습니다.

해당 페이지를 완전히 로드된 이후에 발생하는 이벤트입니다.

자바스크립트로 사용하려면 아래와 같이 사용하시면 됩니다.

const frame = document.querySelector('iframe');
frame.addEventListener('load', () => {
  alert('load');
})

 

iframe을 이용하여 다른 웹사이트를 나의 화면에 가지고 올 수 있습니다.