jQuery를 이용하였습니다.
PHP도 조금 이용했습니다. (그래서 문서의 확장자가 html이 아니라 php 입니다.)
이전에 포스팅 한 글은 크로스도메인을 고려하지 않고 iframe 높이를 조절하는 것이었는데요~
이번에는 크로스 도메인을 사용하는 상태에서 어떻게 해야 하는지 적어 보겠습니다.
외국, 한국 블로그에서 참 많이 소개가 되고 있긴 하지만, 그냥 제 나름대로 다시 정리를 해 보고 싶어서 적어봅니다.
그리고 어느 사이트가 먼저랄 것도 없이 너무 자료가 많았기에 이 기법의 출처가 어딘지는 불분명 하네요~
코드는 뭐... 제가 새로 적었습니다.
혹시 안되는 상황이 보이신다면 댓글 부탁드려요~
1. 크로스 도메인에서 왜 iframe 조절이 간단하게 안되느냐!!
javascript는 보안 정책의 하나로 다른 도메인에서는 접근하지 못하게 되어 있습니다.
보안이 참 골치 아픈 부분이지만, 필요하니까 그렇게 해 뒀겠죠 뭐~ ㅋ
2. 그래서 어떤 방법을 이용할 것이냐!!
A 사이트의 문서에서 B 사이트의 문서를 iframe으로 불러오면 각 문서들 끼리는 javascript로 접근이 불가능합니다.
그래서...
A 사이트 문서 안에 B 사이트 문서, B 사이트 문서 안에 다시 A 사이트 문서를 넣고~
가장 안쪽에 존재하는 A 사이트 문서에서 최 상위 A 사이트 문서를 조종하는 것이죠!!
이를 위해선 A 사이트는 문서가 총 2개가 필요합니다. B 사이트는 하나면 되죠~
3. 그럼 실제 코드는?
a.php
b.php
c.php
이런 식으로 작성하면 됩니다~
PHP도 조금 이용했습니다. (그래서 문서의 확장자가 html이 아니라 php 입니다.)
이전에 포스팅 한 글은 크로스도메인을 고려하지 않고 iframe 높이를 조절하는 것이었는데요~
이번에는 크로스 도메인을 사용하는 상태에서 어떻게 해야 하는지 적어 보겠습니다.
외국, 한국 블로그에서 참 많이 소개가 되고 있긴 하지만, 그냥 제 나름대로 다시 정리를 해 보고 싶어서 적어봅니다.
그리고 어느 사이트가 먼저랄 것도 없이 너무 자료가 많았기에 이 기법의 출처가 어딘지는 불분명 하네요~
코드는 뭐... 제가 새로 적었습니다.
혹시 안되는 상황이 보이신다면 댓글 부탁드려요~
1. 크로스 도메인에서 왜 iframe 조절이 간단하게 안되느냐!!
javascript는 보안 정책의 하나로 다른 도메인에서는 접근하지 못하게 되어 있습니다.
보안이 참 골치 아픈 부분이지만, 필요하니까 그렇게 해 뒀겠죠 뭐~ ㅋ
2. 그래서 어떤 방법을 이용할 것이냐!!
A 사이트의 문서에서 B 사이트의 문서를 iframe으로 불러오면 각 문서들 끼리는 javascript로 접근이 불가능합니다.
그래서...
A 사이트 문서 안에 B 사이트 문서, B 사이트 문서 안에 다시 A 사이트 문서를 넣고~
가장 안쪽에 존재하는 A 사이트 문서에서 최 상위 A 사이트 문서를 조종하는 것이죠!!
이를 위해선 A 사이트는 문서가 총 2개가 필요합니다. B 사이트는 하나면 되죠~
A site document(a.php)
이런 형태로 문서가 작성되는 것입니다.B site document(b.php)
A site document2(a2.php)
3. 그럼 실제 코드는?
a.php
<iframe src="http://b.com/b.php" width="100%" id="iframeouter" frameborder="0" scrolling="no"></iframe>
<script language="javascript">
function iframeResize(height) {
$('#iframeouter').height(height);
}
</script>
<script language="javascript">
function iframeResize(height) {
$('#iframeouter').height(height);
}
</script>
b.php
<script language="javascript">
$(document).ready(function() {
$('#iframeinner').attr('src','http://a.com/a2.php?height='+$(document).find('body')[0].scrollHeight);
});
</script>
<iframe width="100%" id="iframeinner" frameborder="0" scrolling="no" height="5px"></iframe>
$(document).ready(function() {
$('#iframeinner').attr('src','http://a.com/a2.php?height='+$(document).find('body')[0].scrollHeight);
});
</script>
<iframe width="100%" id="iframeinner" frameborder="0" scrolling="no" height="5px"></iframe>
c.php
<html>
<head>
<script language="javascript">
parent.parent.iframeResize(<?=$_GET[height]?>);
</script>
</head>
<body>
</body>
</html>
<head>
<script language="javascript">
parent.parent.iframeResize(<?=$_GET[height]?>);
</script>
</head>
<body>
</body>
</html>
이런 식으로 작성하면 됩니다~
