크롬에서 jquery으로 아이프레임 자동 크기 조절 문제가 있습니다.
본문
아래와 같은 소스로 아이프레임으로 불러온 페이지를 자동으로 높이값을 조절하고 있는데 크롬에서만 오류가 있는것 같습니다.
현재 불러온 아이프레임의 페이지의 높이가 1,200px 이고 다음에 불러온 아이프레임의 높이가 600px 이면 높이가 그냥 1,200px로 머물러 있습니다. 다시 높이가 1,200px 보다 큰 페이지를 불러오면 높이값은 자동으로 더 높게는 변하는데 높이가 줄지는 않습니다. 익스플로러에서는 잘 되는데 크롬에서만 문제가 생기네요.
혹시 이 jquery를 수정할 방법이 있을까요?
답변 부탁드립니다.
<iframe id="iframe1" name="safety_iframe" src="./safety_system_01.php" width="100%" scrolling="no" frameborder="0"></iframe>
<script type="text/JavaScript">
$(document).ready(function(e) {
$('#iframe1').load(function() {
$(this).height($(this).contents().find('body')[0].scrollHeight+"px");
});
});
</script>
답변 1
<iframe id="embeded-content" width="100%" src="http://" scrolling="NO" marginwidth="0" marginheight="0" frameborder="0" allowTransparency="true"></iframe>
function resize_frame(id) {
var frm = document.getElementById("embeded-content");
function resize() {
var ms_ie = false;
var ua = window.navigator.userAgent;
var old_ie = ua.indexOf('MSIE ');
var new_ie = ua.indexOf('Trident/');
if ((old_ie > -1) || (new_ie > -1)) {
ms_ie = true;
}
if ( ms_ie ) {
//IE specific code goes here
var iframeHeight=frm.contentWindow.document.body.scrollHeight;
frm.height=iframeHeight+20;
}else{
frm.style.height = "auto"; // set default height for Opera
contentHeight = frm.contentWindow.document.documentElement.scrollHeight;
frm.style.height = contentHeight + 23 + "px"; // 23px for IE7
}
}
if (frm.addEventListener) {
frm.addEventListener('load', resize, false);
} else {
frm.attachEvent('onload', resize);
}
}
resize_frame('embeded-content');
jquery는 아니지만 제가 쓰던건대 사용해보세요
정말 감사합니다^^
