2013-04-25 3 views
0

내가 iframe이 자동으로 높이를 사용하려고, 대부분의 나를 제공이 있던 코드 해요 :자바 스크립트를 각 브라우저에서 다르게 행동

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> 
<title>THE IFRAME HOLDER</title> 

<script> 
    function alertsize(pixels){ 
    pixels+=32; 
    document.getElementById('myiframe').style.height = pixels+"px"; 
    } 
</script> 

</head> 

<body style="background:silver;"> 
<iframe src='theiframe.htm' style='width:458px;background:white;' frameborder='0' id="myiframe" scrolling="auto"></iframe> 
</body> 
</html> 

iframe이 : 이름이 "theiframe.htm"

으로 저장을
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> 
<title>IFRAME CONTENT</title> 
<script> 
    function toggle(obj) { 
    var el = document.getElementById(obj); 
    if (el.style.display != 'block') el.style.display = 'block'; 
    else el.style.display = 'none'; 
    parent.alertsize(document.body.scrollHeight); 
} 
</script> 
</head> 

<body onload="parent.alertsize(document.body.scrollHeight); " > 

<a href="javascript:toggle('moreheight')">toggle height?</a><br /> 
<div style="display:none;" id="moreheight"> 
    more height!<br /> 
    more height!<br /> 
    more height!<br /> 
    more height!<br /> 
    more height!<br /> 
    more height!<br /> 
    more height!<br /> 
    more height!<br /> 
    more height!<br /> 
    more height!<br /> 
    more height!<br /> 
</div> 
text<br /> 
text<br /> 
text<br /> 
text<br /> 
text<br /> 
text<br /> 
text<br /> 
text<br /> 
THE END 
<div style="clear:both;"></div> 

</body> 
</html> 

IE, Opera 및 Firefox에서는 완벽하게 작동합니다. Chrome 및 Safari에서 작동하지 않는 것 같습니다. 크롬에서

onload="parent.alertsize(document.body.scrollHeight);" 

예 : Safari에서 http://www.warezexpress.com/ups/2009_setembro/chrome.jpg

예 : (iframe이가 확장 및 감소하지 않음) http://www.warezexpress.com/ups/2009_setembro/safari.jpg

하지만 친구가 문제가 가능성이 여기에 있다고 말했다 이 문제를 해결하기 위해 여전히 자바 스크립트를 이해하지 못합니다. 나는이 코드를 포럼에서 준비했다. 아무쪼록 고마워!

+1

가능한 답변 : http://stackoverflow.com/questions/3053072/iframe-resizing-with-scrollheight-in-chrome-safari – showdev

+0

"작동하지 않음"이란 무엇을 의미합니까? 작동하지 않는 것은 무엇입니까? 오류가 있습니까? '알리미'가 호출되지 않았습니까? 전달 된 매개 변수가 올바른 값이 아닌가? 높이가 변하지 않습니까? 어떤 일이 일어나지 않아야하고 그렇게되지 않는 일이 일어나야합니까? –

+0

Chrome에서는 Iframe이 콘텐츠를 숨기는 더 작은 화면 이동 막대를 표시합니다. –

답변

0

브라우저 호환성은 당신이 어려움을 겪고있는 것이라면 어떤 명시 적 이유 바닐라 JS를 사용하지 필요을 할 경우, 그것은, 특히, jQuery 같은 프레임 워크로 시작하는 것이 좋습니다.

+0

jQuery는 항상 * 대답 *이 아닙니다. –

+0

어디서 'jQuery'가 항상 대답입니까? –

+0

그리고 Paulo가 게시 한 내용에 따라 jQuery가 대답 할 수 있습니다. –

관련 문제