Html利用锚点标记顶替iframe实现页面无刷新加载
日期：2014-05-17 浏览次数：20720 次
Html利用锚点标记代替iframe实现页面无刷新加载
在上述代码中，a标签的链接被写成锚点的形式，这样在点击链接的时候，地址栏依然会发生变化，但是页面不会发生跳转，不会重新请求该页面。接下来就是对a标签进行事件绑定了，然后通过Ajax请求页面，实现无刷新加载，够简单吧。
在Html中，有时为了实现页面的无刷新加载，相信有不少人会用到iframe标签。尤其是在做后台管理系统的时候，经常会在左边放置一个导航菜单，然后将正文显示在iframe中，类似如下写法：
<a href="xxx.html" target="iframe">xxx</a> <iframe id="iframe"></iframe>当然这样做有他的好处，但是有时处理起来还是有诸多的不便，iframe实际上就是一个子页面（肤浅理解，对错？）。例如：在父页面中的js方法，只能通过parent.xxx的形式来访问；有时为了检测用户是否登录，在进行页面跳转的时候，一不小心就只在iframe里跳转了（出现iframe里面嵌套着一个主页的恶心页面……）等等问题（见仁见智，这些问题其实都不难解决）。
那么有没有替代方案呢？答案是肯定的，我们可以利用锚点标记来解决，代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<title>测试页面</title>
</head>
<body>
<a href="#/~lc">测试链接</a>
<br>
<a href="#/~lc">测试链接</a>
<br>
<a href="#/~lc">测试链接</a>
<br>
<div id="content"></div>
</body>
<script type="text/javascript">
$('a').each(function() {
this.onclick = function() {
$.get(this.href.split('#/~')[1], function(data) {
$('#content').html(data);
});
};
});
</script>
</html>在上述代码中，a标签的链接被写成锚点的形式，这样在点击链接的时候，地址栏依然会发生变化，但是页面不会发生跳转，不会重新请求该页面。接下来就是对a标签进行事件绑定了，然后通过Ajax请求页面，实现无刷新加载，够简单吧。
本文地址
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
