콘텐츠를로드하기 위해 iframe의 크기를 조절하십시오.

iframe에 콘텐츠를로드하고 내용에 따라 높이를 조정하고 싶습니다. 모든 페이지가 동일한 도메인에 있습니다. 내가 찾은 일부 스크립트를 시도했지만 아무 것도 효과가 없었습니다. 대부분의 경우,로드 된 내용을 새 탭으로 엽니 다.콘텐츠를로드하기 위해 iframe의 크기를 조절하십시오.

HTML :

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>index</title> 
<link href="styles.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<div id="container"> 
    <div id="header"></div> 
    <div id="nav"><a href="home.html">Home</a> <a href="the_band.html">The Band</a> 
    <a href="News.html">News</a> <a href="gallery.html">Gallery</a> 
    <a href="contact.html">Contact</a></div> <div id="content"></div> 
    <iframe id="frame"></iframe> 
    <div id="footer"></div> 
</div> 
</body> 
</html>

CSS :

div#container { 
    height: 100%; 
    width: 100%; 
} 
div#header { 
    top: 0px; 
    width: 100%; 
    height: 80px; 
    position: fixed; 
    background-color: transparent; 
    text-align: center; 
} 
div#nav { 
    font-family: MgSouvenirLight; 
    font-size: 18pt; 
    color: #FF0; 
    top: 120px; 
    width: 100%; 
    height: 40px; 
    position: fixed; 
    text-decoration: none; 
    font-weight: bolder; 
    font-variant: normal; 
} 
div#footer { 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 9px; 
    bottom: 0px; 
    position: fixed; 
    height: 30px; 
    width: 100%; 
    text-align: center; 
    color: #fff; 
} 
#frame { 
    position: absolute; 
    top: 200px; 
    bottom: 40px; 
    width: 800px; 
    border: none; 
    left: 120px; 
    height: auto; 
} 
a:link { 
    font-family: MgSouvenirLight; 
    font-size: 18pt; 
    color: #FF0; 
} 
a:visited { 
    font-family: MgSouvenirLight; 
    font-size: 18pt; 
    color: #FF0; 
} 
a:hover { 
    font-family: MgSouvenirLight; 
    font-size: 18pt; 
    font-style: italic; 
    color: #FC0; 
}

출처

2014-11-24 Thodoras

당신은보고 시도 할 수 있습니다 이 하나 : http://stackoverflow.com/questions/819416/adjust-width-height-of-iframe-to-fit-with-content-in-it – Stefan

@St efan, 나는 그것을 시도 (newwidth 줄을 제거),하지만 새로운 탭에있는 내용을로드합니다. – Thodoras

당신은 iframe이로드 된 후 높이를 얻기 위해 시도하고 jQuery로 변경 할 수

 $('iframe').load(function() { 
     setTimeout(iResize, 50); 
     // Safari and Opera need a kick-start. 
     var iSource = document.getElementById('your-iframe-id').src; 
     document.getElementById('your-iframe-id').src = ''; 
     document.getElementById('your-iframe-id').src = iSource; 
    }); 
    function iResize() { 
     document.getElementById('your-iframe-id').style.height = 
     document.getElementById('your-iframe-id').contentWindow.document.body.offsetHeight + 'px'; 
    }

출처

2014-11-24 15:16:48

콘텐츠를로드하기 위해 iframe의 크기를 조절하십시오.

답변

관련 문제