将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 2014-11-24 15:11:16

@St efan，我尝试过（删除新的宽度线），但它将内容加载到一个新的标签中。 – Thodoras 2014-11-24 16:35:41

，你可以尝试获得高度的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调整为加载内容

回答

相关问题