A 에서 B 를 iframe 으로 가져와서 보여 주어야 할 경우.. height 값을 조정하여 iframe 을 리사이즈 할 경우가 있다.
그런데, A 와 B 가 서로 같은 도메인 안에 있다면 상관이 없지만 다른 도메인이라면 웹브라우저가 이를 허용하지 않는다.
이럴 때 두가지 해경 방법이 있겠는데..
1. A 쪽에서 B 를 URLConnection 하고 가져와서 A1 에 담고, A1 을 A 에서 iframe 안에 사용하는 방법
A1 의 내용은 다른 도메인 B 를 담고 있지만, A1 자체는 A 쪽 도메인에 존재하기 때문에 iframe 사이즈를 조정하는데 아무 문제가 없다.
다만 이때, 파라미터 처리를 해야 하는 경우 고민을 해야 한다.
특히 B 에 탭메뉴가 있고 파라미터까지 관련된다면 난해해 진다. A 의 iframe src 에 넣어지는 것이 B 가 아니라 A1 이기 때문이다.
2. A 쪽에 iframe 높이를 조정할 수 있는 자바스크립트 함수(Aa)를 넣고,
A1 에서 이(Aa)를 top.Aa() 형식으로 호출하는 자바스크립트 함수(Ab)를 담아서,
B 쪽에 A1 을 호출하는 감추어진 iframe 을 만들어 놓으면..
B 가 로딩될 때 A1 이 로딩되고 A1.Ab() 가 실행되는데, Ab() 에는 top.Aa() 이 들어 있어서..
A.Aa() 를 실행하므로 동일한 도메인에 속한 A 의 iframe 높이를 조정하는 것.
A.Aa.() 함수가 resize 할 때의 높이값은 B 가 A1을 호출할 때 파라미터로 넘겨주면 된다.
상기 2번의 경우..
A1 에 해당하는 파일엔 다음 내용을 넣는다.. A1 이 호출될 때 B 에서 height 값을 파라미터로 전달.
<script type="text/javascript">
function onLoad(){
var params = window.location.search.substring(1).split('&');
var height;
for(var i=0, l=params.length; i<l; i++){
var parts = params[i].split('=');
switch(parts[0]){
case 'height': height = parseInt(parts[1]); break;
}
}
if(typeof(height) == 'number'){
top.resizeIframe(height);
}
}
window.onload = onLoad;
</script>
<script type="text/javascript">
$(document).ready(function(){
top.resizeIframe(<%= request.getParameter("height") %>); // B 에서 숨겨진 아이프레임으로 A1 이 호출되지만, A 가 top 이 되는 것.
});
</script>
A 에는 아래 코드를 추가.
<script>
function resizeIframe(height){
document.getElementById('idIframe').setAttribute('height', height);
// 또는 idIframe.setAttribute('height',height), $('#idIfrmae').attr('height',height);
}
</script>
<iframe id="idIframe" width="500" height="100" frameborder="0" src="<웹페이지 B>" style="padding:0;margin:0;border:none"></iframe>
iframe 의 frameborder 는 IE 때문에 넣어야.. ㅠ.
B 에서는 아래 코드 사용.. B가 A1 을 숨겨진 아이프레임으로 호출할 때 B 의 높이값을 파라미터로 전달해 주는 것이 포인트.
...
<body style="padding:0;margin:0">
<div style="width:500px;height:400px;background:yellow;font-size:10pt">테스트 중....</div>
<iframe id="hiddenIframe" src="" width="0" height="0" frameborder="0"></iframe>
<script>
$(document).ready(function(){
$('#hiddenIframe').attr('src', '<A1>?height='+ $('body').height());
});
</script>
크로스브라우징을 생각할 때 B 에서 height 값에 얼마를 더해줄 필요가 있을 수는 있겠다.. ㅠ.
height 뿐만 아니라 width 도 얼마든지 전달하여 리사이징이 가능.. ~.
'Local Oriented > jQuery' 카테고리의 다른 글
| jquery 플러그인 (0) | 2014.12.15 |
|---|---|
| 백스페이스(BS) 눌렀을 때 메시지 뿌리고 화면 제어 (뒤로가기) (0) | 2014.12.09 |
| jquery 1.4.x 나 1.5.x 에서 1.10 으로 올라오면서 주의사항 (0) | 2014.10.27 |
| jquery OS 와 브라우저 종류/버전, 화면 사이즈 확인 (0) | 2014.10.15 |
| $(opener.document) (0) | 2014.08.11 |