iframe框架的应用

目标：后台系统，点击侧栏菜单后，右边div的要显示对应的内容。就是说，每选一下左边的菜单，右边的内容都要变化。

方法：使用iframe框架。

 第一步：在需要展示的div中写iframe：

<iframe src=“要插入的html文件.html” name="iframe（任意取名）" width=420 height=330 frameborder=0 scrolling=auto>如果浏览器不支持iframe框架，会向用户显示这里的文字</iframe>

第二步：在相应的li中写：

<li><a href="要显示的html文件.html" target="iframe的name">项目管理</a><iframe>

 最后成型的代码：

 

另外一个更加清晰简单的实现：

<html> 
<body> 
<a href= "1.html " target= "iFrame1 "> page1 </a> <br/> 
<a href= "2.html " target= "iFrame1 "> page2 </a> <br/> 
<a href= "3.html " target= "iFrame1 "> page3 </a> <br/> 
<a href= "4.html " target= "iFrame1 "> page4 </a> <br/>

<div id= "iFrame1 " style= "position:absolute; left:220px; top:200px; z-index:18 "> 
<iframe name= "iFrame1 " width=542 height=615 src= "1.html " scrolling= "auto " frameborder= "0 "> </iframe> 
</div>


</div> </body> 
</html>

 

posted @ 2017-05-10 21:28  SingSingaSong  阅读(516)  评论(0)  编辑  收藏  举报