2017-04-15 109 views
0

我是html新手。我尝试了很多关于调整iframe的代码。但是任何代码都不适用于我的项目。我正在使用Dreamweaver和xhtml 1.0。我在我的索引网页上包含了iframe(index.html)。现在我想在iframe中打开主页(Home.html),Services.html等。 home.html和其他页面会在iframe中打开,但iframe不会根据这些页面的内容调整大小。如果有人知道,请给我一个工作代码。根据内容自动调整iframe高度

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 

 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
 
<title>Pink Maid Beauty Salon | Home</title> 
 
</head><link rel="stylesheet" href="Style.css"> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" /> 
 
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script> 
 
<script type="text/javascript"> 
 
var MenuBar1 = new Spry.Widget.MenuBar("navigationbar", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"}); 
 
</script> 
 

 
<body> 
 

 
<!--Background--> 
 
<div class="body"> 
 

 
<!--Header--> 
 
<div id="header"></div> 
 

 
<!--Logo--> 
 
<div id="logo"></div> 
 

 
<!--Menu--> 
 
<div id="menu"> 
 
    <ul> 
 
    <li> 
 
     <h2><a href="#home">Sign Up <i class="fa fa-user-plus" aria-hidden="true"></i></a></h2> 
 
    </li> 
 
    <li> 
 
     <h2><a href="#news">Login <i class="fa fa-sign-in" aria-hidden="true"></i></a></h2> 
 
    </li> 
 
    <li> 
 
     <h2><a href="#contact">Cart <i class="fa fa-shopping-cart" aria-hidden="true"></i></a></h2> 
 
    </li> 
 
    </ul> 
 
</div> 
 

 
<!--Navigation--> 
 
<div id="navigation"> 
 
    <ul id="navigationbar" class="MenuBarHorizontal"> 
 
    <li><a href="Home.html" target="content">Home</a></li> 
 
    <li><a href="Services.html" target="content">Services</a></li> 
 
    <li><a href="Gallery.html" target="content">Gallery</a></li> 
 
    <li><a href="About Us.html" target="content">About Us</a></li> 
 
    <li><a href="Contact Us.html" target="content">Contact Us</a></li> 
 
    </ul> 
 
</div> 
 

 
<!--Content--> 
 
<iframe src="Home.html" name="content" frameborder="0"> 
 
</iframe> 
 

 
</body> 
 
</html>

+0

不要使用spry它已被Adobe放弃多年。使用jQuery它不会很快。 – zer00ne

回答

0

这不是一样简单,因为它应该是问题。我写了一个js库来解决这个问题,你可能会觉得有用。

https://github.com/davidjbradshaw/iframe-resizer

+0

请解释一下如何使用这些js库。 @David Bradshaw –

+0

https://github.com/davidjbradshaw/iframe-resizer#typical-setup然后将iframeResizer.contentWindow.min.js添加到iFrame中的页面。 –

+0

这不是工作的先生。我不知道该怎么办。 –

相关问题