iframe cross domain 문제(iframe 부모 자식 대화, scroll size 조절 예제)
현재 사이트에서 기능을 새로 만들고 보여 주는 것보다 다른 서버에 이미 만들어져 있는 화면을 그대로 현재 화면을 가져오고자 할 때 iframe 태그를 이용하는 경우가 생기는 것 같습니다.
현재 웹사이트에서 iframe 태그를 이용해 현재 사이트에서 다른 사이트에 내용을 보여주고 싶은 경우가 생기는 데 iframe으로 보이는 내용이 스크롤이 필요 없는 경우라면 문제가 없겠지만 세로 스크롤이 필요할 정도로 보이는 내용이 많은 경우 한 페이지에 스크롤이 두 개 생기면 보기에 지저분합니다.
iframe의 크기가 정해져 있다면 상관없겠지만 iframe안에서 특정 상황에 따라 높이가 계속 변경된다 보니 반드시 iframe의 크기를 유동적으로 체크해 스크롤 사이즈 조절이 필요했습니다.
개인적으로 여러 가지 방법을 생각해 봤습니다. Javascript(jQuery)를 이용해 불러온 iframe 태그에 접근해 iframe 높이를 가져오려고 하였으나 같은 서버가 아니라면 크로스 도메인 문제로 iframe의 스크롤 높이를 가져올 수 없었습니다.
새로 기능을 만들기 위해서는 많은 시간이 필요했기에 반드시 현재 페이지에서 불러오는 iframe 높이를 가져오는 게 중요했습니다.
저의 경우는 다른 서버에 있는 페이지 소스 수정도 가능하였고 현재 메인이 되는 페이지 소스도 수정이 가능하였기 때문에 위와 같은 문제를 해결할 수 있었습니다.
개인적으로 다시 사용할 가능성도 있고 다른 분 중 필요한 분들이 있을 수도 있다는 생각에 간단히 예제 소스 파일을 작성해 보았습니다.
먼저 메인 페이지 소스 코드입니다. 다른 서버에 있는 페이지를 iframe 태그를 이용해 가져왔으며 현재 iframe 높이를 크로스 도메인 문제를 피해 가져올 수 있었습니다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style>
.my_iframe{
display: block; border: none; height:769px; width: 100%;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
window.addEventListener('message', function(e) {
$(".my_iframe").css("height", e.data.height+"px");
$("#how_hight").text(e.data.height);
});
});
</script>
<title>아이프레임 메인</title>
</head>
<body>
<p style="text-align: center;"><a href="/come_iframe.html">새로고침</a></p>
<p style="text-align: center;">현재 iframe 높이 : <span id="how_hight"></span></p>
<iframe src="불러올 웹 페이지 주소" class="my_iframe" scrolling="no" ></iframe>
</body>
</html>
위 소스를 복사하여 실행하시면 아래 이미지와 같이 표시됩니다. iframe의 기본 사이즈를 지정한 생태에서 새로 고침을 할 때마다 변경되는 iframe 높이를 가져올 수 있으며 iframe의 크기만큼 메인 페이지의 스크롤 사이즈가 변경됩니다.
메인 페이지 iframe에서 실제로 불러오는 페이지 소스 코드입니다. 랜덤하게 이미지 태그를 iframe_div 태그에 넣어 주고 현재 페이지에 높이 정보를 부모 페이지에 보내주는 역활을 합니다.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.img{
width: 1000px;
}
.iframe_div{
text-align: center;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
//iframe 높이를 다르게 하기 위해서 html을 임의로 몇개 넣어준다.
var html_count = Math.ceil( Math.random()*15 );
var html = "<img src='test1.jpg' class='img'>";
for(var i=0; i<html_count; i++){
$(".iframe_div").append(html);
}
//현재 스크롤 높이를 보낸다.
var height = $(document).height();
window.parent.postMessage({ height: height }, '*');
console.log("높이는"+height);
});
</script>
</head>
<title>아이프레임 A</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<body>
<div class="iframe_div">
<img src='test1.jpg' class='img'>
</div>
</body>
</html>
위와 같이 소스 코드를 작업하게 되면 새로 고침 버튼을 누를 때 마다 높이 사이즈와 스크롤 사이즈가 변경되게 됩니다.
물론 몇 가지 문제가 좀 더 있긴 하지만 크로스도 메인 문제를 피해서 iframe의 부모 자식 대화를 통해 원하는 정보를 가져올 수 있었습니다.
혹시라도 필요한 분들이 있으시다면 도움이 되었기를 바랍니다.
