iframe的name属性配合a标签的target属性实现页面局部刷新:
页面一代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li><a href="M2.html" target="myFrame">培养目标</a></li>
<li><a href="M3.html" target="myFrame">培养目标</a></li>
</ul>
<iframe width="600" height="300" name="myFrame">
</iframe>
</body>
</html>
页面二(M2.html)代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h2>软件工程师实训课程体系培养目标</h2>
<ul>
<li>精通Java、JSP、Servlet、EJB、JDBC、SSH(Struts、Springs、Hibernate)等编程技术;</li>
<li>掌握国化、规范化的软件工程方法及开发管理流程;</li>
<li>精通基于Oracle/MySQL数据库的开发技术;</li>
<li>掌握主流的商用及开源的应用平台及开发工具,熟悉开发环境;</li>
<li>掌握面向对象的软件分析、设计方法OOA、OOD和UML工具;</li>
<li>具备相当于1-2年的软件开发工作经验。</li>
</ul>
<hr>
<p>版权所有©2006-2010国家软件产业基地人才实训基地.保留所有权利</p>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
页面三(M3.html)代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h2>课程内容</h2>
<hr>
<ol>
<li>计算机应用与软件开发技术</li>
<li>客户端网页编程</li>
<li>关系型数据库及SQL语言</li>
<li>面向对象的基础-Java实现</li>
<li>XML基础</li>
<li>Java Web编程</li>
<li>Java数据库编程</li>
<li>Java高级编程</li>
<li>OOAD与UML</li>
</ol>
<hr>
<p>版权所有©2006-2010国家软件产业基地人才实训基地.保留所有权利</p>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
只需要将iframe的name属性值和a标签的target属性值设置为一样,即可在页面中点击超链接实现局部刷新。
这只是一种老的方法,以后会学ajax实现页面局部刷新功能。
- <iframe id="myFrameId" name="myFrameName" scrolling="no" frameborder="0" style="width:200px; height:150px; "></iframe>
- <a href="../ashx/Print2DCodeImage.ashx?codeInfo=Demo123" target="myFrameName" >打印二维码</a>
上面的这个a标签的target指向的是name为myFrameName的iframe,不是用Id来做指向的目标,如果target=“myFrameId”的话只有新版的Chrome、opera支持,在IE10,FF中都不生效。
一个小细节,花了不少时间。