將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調整爲加載內容

回答

相關問題