收藏
批改状态：合格
老师批语：在Ajax流行的今天 , 还有相当多的项目在用iframe写后台, 可见它的生命力
前言：平时用的后台功能模块菜单切换，其原理是：iframe的target属性与a标签的name属性关联使用，实现的功能菜单切换，实现想要的后台效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe的target属性与a标签的name属性关联使用</title>
<style>
ul{
float: left;
margin-right: 10px;
}
ul li{
list-style: none;
display: block;
}
ul li a{
padding-left: 10px;
text-decoration: none;
}
.iframe{
float: left;
}
</style>
</head>
<body>
<!--a标签-->
<h2>作业列表后台</h2>
<ul>
<li class="item">1<a href="http://www.php.cn/blog/detail/13700.html" target="main">默写HTML文档的基本结构</a></li>
<li class="item">2<a href="http://www.php.cn/blog/detail/13702.html" target="main">实例演示无序列表的基本使用</a></li>
<li class="item">3<a href="http://www.php.cn/blog/detail/13704.html" target="main">实例演示表格的用法以及行列合并的应用</a></li>
<li class="item">4<a href="http://www.php.cn/blog/detail/13712.html" target="main">实例演示表单以及常用控件元素的使用</a></li>
</ul>
<!--iframe框架-->
<iframe srcdoc="<h1>作业列表后台</h1>" frameborder="1" id="iframe" width="800" height="600" name="main" ></iframe>
</body>
</html>点击 "运行实例" 按钮查看在线实例
以上是手写简单代码案例，本地具体运行效果截图如下：
要点总结：
a标签给属性target="xxx ",其中xxx在遵守命名规则的情况下可随意取名，且可以生成多个a标签
iframe标签的name="xxx"必须和关联a标签的target属性相同
iframe标签可给框架单独设置边框（frameborder）大小 、框架宽度（width）、框架高度（height）
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
