Html利用锚点标记代替iframe实现页面无刷新加载
2013-04-08 15:44
351 查看
在Html中,有时为了实现页面的无刷新加载,相信有不少人会用到iframe标签。尤其是在做后台管理系统的时候,经常会在左边放置一个导航菜单,然后将正文显示在iframe中,类似如下写法:
那么有没有替代方案呢?答案是肯定的,我们可以利用锚点标记来解决,代码如下:
在上述代码中,a标签的链接被写成锚点的形式,这样在点击链接的时候,地址栏依然会发生变化,但是页面不会发生跳转,不会重新请求该页面。接下来就是对a标签进行事件绑定了,然后通过Ajax请求页面,实现无刷新加载,够简单吧。
当然,你也可以直接通过Ajax请求页面,但是这样做以后,地址栏不会有变化,当你刷新页面时,会回到初始页面
本文地址
<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请求页面,实现无刷新加载,够简单吧。
当然,你也可以直接通过Ajax请求页面,但是这样做以后,地址栏不会有变化,当你刷新页面时,会回到初始页面
本文地址
相关文章推荐
- [HTML/JS]利用JQuery的load函数动态加载其它页面的内容的实现代码代替Ifram
- 【HTML/JS】利用JQuery的load函数动态加载其它页面的内容的实现代码
- 【笔记】利用ajax返回Html代替iframe,实现局部更新
- 实现页面内的指定位置跳转 HTML标记语言:锚点的使用
- html嵌套iframe如何实现等iframe页面加载完进行下一步调用
- 利用img标签实现的静态的HTML页面访问次数的Servlet
- 利用cookie实现iframe刷新时停留在当前页面
- 移动设备的HTML页面中图片实现滚动加载
- asp.net mvc 中使用 iframe 加载相应的静态html页面进行显示
- 利用代理页面解决html iframe跨域访问网站问题
- 如何通过HTML标记或JS代码实现跳转返回页面顶部
- ExtJs非Iframe框架加载页面实现 解决自适应高度
- php无刷新利用iframe实现页面无刷新上传文件(1/2)
- jsp页面中某个src,如某个iframe的src,应该填写什么?可以是html、jsp、servlet、action吗?是如何加载的?
- 两种方法实现在HTML页面加载完毕后运行某个js:
- [转]iframe自适应加载页面高度-js实现
- 移动设备的HTML页面中图片实现滚动加载
- iframe自适应加载页面高度-js实现(转载)
- HTML,Jsp,Jquery 应用锚点实现页面的导航显示
- 两种方法实现在HTML页面加载完毕后运行某个js