Измените 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, я попробовал это (удаление строк новой строки), но загружает контент на новую вкладку. – 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 на загруженный контент

ответ

Смежные вопросы