在去年断桥残雪已经写了一篇使用iframe来解决Ajax前进后退的方法，也提到了通过改变hash的方法来解决这个问题，这也是比较方便的方法，而使用iframe实现Ajax前进后退可以在不改变浏览器地址栏地址的前提下通过iframe地址的变化来“欺骗”浏览器产生前进后退，hash的方法则是直接改变浏览器地址栏地址，从而使浏览器产生前进后退。

hash导致浏览器产生前进后退原理

浏览器URL的hash值，指的是URL地址之后的#hash部分，我们可以通过JavaScript的location对象的location.hash方法来获得或者改变，但是IE中，不能设置，好像是IE中只能通过连接来实现hash的改变，不过我们可以通过jQuery插件hashchange中的$.locationHash函数来解决这个问题。

比如一个页面的地址是：http://js8.in/#top，那么这个页面的location.hash=”#top”，如果要改变这个地址的hash，可以给location.hash赋值，如：location.hash=”#home”，在IE下可以使用hashchange函数中$.locationHash(hash)给hash赋值。在日常我们常见的使用hash应用中，hash值使用最多的方式是 “返回顶部” 功能。

当hash值改变的时候，浏览器地址也就发生了相应的变化，这样浏览器就会以为地址发生了变化，从而产生前进后退按钮的变化，在这时我们可以通过浏览器后退按钮，把URL“后退”为之前的URL（只是#后的hash变化而已）。我们可以通过浏览器的这一个特点来解决Ajax应用中导致的前进后退失效问题。

使用hash变化来解决Ajax导致浏览器前进后退按钮失效

在这里断桥残雪使用jQuery以及jQuery的hashchange插件来写一个hash变化来解决上述问题。当我们引入jQuery1.4以及hashchange插件之后，我们就可以给window绑定一个hashchange事件，用来监控浏览器的hash是否发生了变化，也就是用户是否点击了浏览器的前进后退按钮，当用户点击前进或者后退之后，除非doHash函数来根据hash处理Ajax请求。具体js代码如下：

function setHash(a){
	$.browser.msie?$.locationHash(a):location.hash=a;
}
$(window).hashchange(function(){
	doHash();
});
function doHash(){
	var h = location.hash;
        switch (h) {
              case "#ajax1":
                   ajaxFn1();
                   break;
              case "#ajax2":
                   ajaxFn2();
                   break;
              default:
                $("#ajax").html("哈哈，hash没有啦！");
        }
}
function ajaxFn1(){
	$("#ajax").load("hi.txt", function(){
		setHash("#ajax1");
	});
}
function ajaxFn2(){
	$.get("hi.html", function(t){
		$("#ajax").html(t);
		setHash("#ajax2");
	});
}

断桥残雪简单的做了一个demo演示，大家可以点击查看一下：

使用hash来实现Ajax前进后退demo演示

另外一种解决Ajax前进后退按钮失效问题的方法，请查看文章：《关于Ajax在浏览器中产生前进后退的实现方法》

随机文章

• 前端开发优化总结
• IE onchange事件触发bug？
• 08.11.19
• 全世界都在笑中国傻
• 微软官方发布IE调试工具：SuperPreview for IE
• JavaScript跨浏览器的添加删除事件绑定函数
• jQuery选择器使用详解
• 使用Apache htpasswd.exe来管理SVN帐户

© 三水清 for 三水清, 2010. | 10 comments |在微博关注我：@清-三水清
收藏到： 人人网 | 豆瓣 | 开心网 | QQ书签 | 新浪微博 | 腾讯微博
Post tags: ajax, javascript, jquery

猜你喜欢：
关于Ajax在浏览器中产生前进后退的实现方法	用document.domain+iframe实现Ajax跨子域	Ajax评论bug更新	Wordpress Follow5 插件开发日记—插件后台Ajax应用及jQuery的使用
无觅

我在WordPress天气插件、滔滔API接口处理上都使用了JSONP的方法来实现的跨域。而今天我要通过使用JS的document.domain和iframe来解决Ajax跨子域的问题。

原理

通过给主页面跟请求页面设置相同的document.domain来，欺骗浏览器，达到Ajax跨子域的效果，此方法在IE，chrome，Firefox，Safari，Opera下测试通过。

缺点：无法实现不同主域名之间的通讯。并且当在一个页面中还包含有其它的iframe时，会产生安全性异常，拒绝访问。

使用document.domain+iframe跨域实例

首先我们假设主页面地址为：http://js8.in/mywork/crossdomain/index.html，我们要加载的内容是位于work.2fool.cn域名下的helloworld.txt。我们需要在主页面中设置document.domain为2fool.cn，然后主页面添加一个iframe，src为域名work.2fool.cn下的一个url，在iframe页面中同样设置document.domain为2fool.cn，同时iframe中需要添加Ajax的函数，例如引入jQuery.js。

主页index.html的主要代码如下：

<button onclick="crossDomain();">开始跨域</button>
<div id="ajax"></div>
<iframe src="http://work.2fool.cn/crossdomain/iframe.html" id="iframe" style="display:none;">
</iframe>
<script type="text/javascript">
document.domain = '2fool.cn';
function crossDomain(){
    var iframe=document.getElementById('iframe').contentWindow.$;        
    iframe.get("http://work.2fool.cn/crossdomain/helloworld.txt",function(data){
        document.getElementById("ajax").innerHTML=data;
    });
}
</script>

iframe页面主要代码如下：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
document.domain = '2fool.cn';
</script>

演示Demo

演示地址：http://js8.in/mywork/crossdomain/index.html

演示下载：http://js8.in/mywork/crossdomain/crossdomain.zip

随机文章

• jQuery+google weather API轻松实现天气地图（二）
• 我被遨游撞了一下腰
• 瑞星贿赂造假丑闻曝光，为转移视线捏造360后门事件
• 用批处理说中文！
• javascript嵌套函数的效率问题
• 08.11.19
• 使用if IE hack注释解决CSS以及JS的兼容问题
• 关于Ajax在浏览器中产生前进后退的实现方法

© 三水清 for 三水清, 2010. | 10 comments |在微博关注我：@清-三水清
收藏到： 人人网 | 豆瓣 | 开心网 | QQ书签 | 新浪微博 | 腾讯微博
Post tags: ajax, iframe, javascript, 跨域

猜你喜欢：
关于Ajax在浏览器中产生前进后退的实现方法	[转]利用跨域资源共享（CORS）实现ajax跨域调用	再谈Iframe的问题	使用JavaScript在IE和Firefox下进行iframe的DOM操作
无觅

1、Ajax Load

Ajax Load 在线loading图标制作网站

Ajax Load所提供的种类丰富，也可以自定义Loading图标样式，推荐！

2、Load Info

Load Info loading图标网站

Load Info在线制作Loading图标的免费网站，目前Load Info网站提供了90多种（总有一种适合你）动态图标。而且每种图标都自定义背景色和前景色，更有三种不同的尺寸可以选择，包括 16×16, 24×24, 48×46，很是方便实用。
3、Preloaders.net

preloaders.net在线制作loading图标

Preloaders.net页面比较帅气，并且可以制作个性的Loading图标，甚至制作3D Loading图标，推荐！

4、Web Script Lab

Web Script Lab在线Loading制作网站

Web Script Lab样式还算比较多，不过比起上面几个就不行了~

5、Chimply

Chimply Loading图标

Chimply 图标比较难看，不过也有个性的骷髅~

6、Ajax Activity-indicators

Ajax Activity-indicators 是一个收集Loading的网站

Ajax Activity-indicators 是一个收集Loading图标的网站，不太推荐！

随机文章

• 使用html5 postMessage和window.name实现多浏览器跨域
• 使用hash来实现Ajax前进后退
• 手把手图解教你使用PQ魔法师调节硬盘分区大小
• 迅雷7起航版一键破解–让非会员也可免费体验
• Google AdWords免费广告费用申请下来了
• 只要20元，你也可以做个QQ爱墙
• 2010年世界杯比赛时间表-北京时间
• 【PPT分享】XSS注入和防范

© 三水清 for 三水清, 2009. | No comment |在微博关注我：@清-三水清
收藏到： 人人网 | 豆瓣 | 开心网 | QQ书签 | 新浪微博 | 腾讯微博
Post tags: ajax, Loading, 素材

猜你喜欢：
Ajax评论bug更新	关于Ajax在浏览器中产生前进后退的实现方法	万众期待的Ajax评论发布啦-dedecms扩展工具	使用hash来实现Ajax前进后退
无觅

实现的机制

主要使用的两个html：index.html，history.html（iframe src地址）。
主要代码参考index.html以及history.html的js部分:

现在说说实现的方式

Index.html中代码解释：
wHistory.init();
给body插入iframe跟一个表单（主要用于Safari浏览器、或者其他特殊使用，比如复制地址方面，直接取值input的value即可，不需要处理，而取iframe的src还要进行字符串的处理）

判断是否为Safari浏览器，如果是则特殊处理一下，根据不同的浏览器定义main函数

Callback函数处理返回的信息。

History.html中代码解释

对框架中的src进行处理，运行父窗口中的函数wHistory.callback();

测试中使用的浏览器：IE6+ ，FF， Opera10 ，Safari4，chrome欢迎大家测试其他版本的浏览器，发现问题及时提出

演示地址：http://js8.in/mywork/ajax_history_demo

下载地址：http://js8.in/uploads/soft/ajax_history_demo.rar

随机文章

• onbeforeunload与a标签在IE中的冲突bug
• Javascript中模拟PHP的base64_decode和base64_encode函数
• 万众期待的Ajax评论发布啦-dedecms扩展工具
• 巧用谷歌Reader订阅最新春运信息
• 使用windows7的virtual PC打造原装IE6、IE7、IE8测试环境
• 男人也需要一个依靠[转]
• 手把手图解教你使用PQ魔法师调节硬盘分区大小
• 提高Firefox的innerHTML()的性能

© 三水清 for 三水清, 2009. | 6 comments |在微博关注我：@清-三水清
收藏到： 人人网 | 豆瓣 | 开心网 | QQ书签 | 新浪微博 | 腾讯微博
Post tags: ajax, iframe, javascript

猜你喜欢：
用document.domain+iframe实现Ajax跨子域	使用hash来实现Ajax前进后退	Ajax评论bug更新	使用JavaScript在IE和Firefox下进行iframe的DOM操作
无觅

PS：欢迎大家和我交换友情链接，点击首页的“申请链接”提交就可以啦~

具体的使用方法和注意事项是：
1.打开 include/pub_datalist_dm.php  找到“//获取分页列表”，在其前添加上下面代码：

    //获取 ajax 分页列表 designed BY WYQ 断桥残雪
    function GetAgaxPageList($list_len)
    {
        global $lang_pre_page;
        global $lang_next_page;
        global $lang_index_page;
        global $lang_end_page;
        $prepage="";
        $nextpage="";
        $prepagenum = $this->nowPage-1;
        $nextpagenum = $this->nowPage+1;
        if($list_len==""||ereg("[^0-9]",$list_len)) $list_len=3;
        $totalpage = ceil($this->totalResult/$this->pageSize);
       
        if($totalpage<=1&&$this->totalResult>0) return "共1页/".$this->totalResult."条记录";
        if($this->totalResult == 0) return "共0页/".$this->totalResult."条记录";
       
        $purl = $this->GetCurUrl();
        $geturl="";
        $hidenform="";
        if($this->totalResult!=0) $this->SetParameter("totalresult",$this->totalResult);
        if(count($this->getValues)>0)
        {
            foreach($this->getValues as $key=>$value)
            {
                $value = urlencode($value);
                $geturl.="$key=$value"."&";
                $hidenform.="<input type=’hidden’ name=’$key’ value=’$value’>rn";
            }
        }
        $purl .= "?".$geturl;
       
        //获得上一页和下一页的链接
        if($this->nowPage!=1)
        {
            $prepage.="<a href=’javascript:AjaxPage($prepagenum)’>$lang_pre_page</a> rn";
            $indexpage="<a href=’javascript:AjaxPage(1)’>$lang_index_page</a> rn";
        }
        else
        {
            $indexpage="$lang_index_page rn";
        }   
        if($this->nowPage!=$totalpage&&$totalpage>1)
        {
            $nextpage.="<a href=’javascript:AjaxPage($nextpagenum)’>$lang_next_page</a> rn";
            $endpage="<a href=’javascript:AjaxPage($totalpage)’>$lang_end_page</a> rn";
        }
        else
        {
            $endpage=" $lang_end_page rn";
        }
        //获得数字链接
        $listdd="";
        $total_list = $list_len * 2 + 1;
        if($this->nowPage>=$total_list)
        {
            $j=$this->nowPage-$list_len;
            $total_list=$this->nowPage+$list_len;
            if($total_list>$totalpage) $total_list=$totalpage;
        }   
        else
        {
              $j=1;
              if($total_list>$totalpage) $total_list=$totalpage;
        }
        for($j;$j<=$total_list;$j++)
        {
              if($j==$this->nowPage) $listdd.= "<strong>$j</strong> rn";
              else $listdd.="<a href=’javascript:AjaxPage($j)’>".$j."</a> rn";
        }

        $plist = "<div class="pagelistbox">";
        $plist.=$indexpage;//首页
        $plist.=$prepage;//上一页
        $plist.=$listdd;//分页
        $plist.=$nextpage;//下一页
        $plist.=$endpage;//末页
        $plist.="</div>rn";
        return $plist;
    }   //断桥残雪设计

2.下载附加中的内容（点击下载） ，FTP到根目录，
3.GBK用户：除了Ajax-feedback.php文件外，其他文件和utf8的内容一样，自己注意另存为ANSI格式就可以啦~
UTF-8用户如果错误，可以使用Uedit32把“ajax_feedback.php”改写成UTF-8无DOM格式的文件
其他的就不说啦~我要洗衣服去啦~好累，大家要体谅我啊~我还要考研呢~呵呵~

附件地址：/uploads/soft/ajax-feedback.rar

随机文章

• 页面设计的10免费图标组合
• 推荐六个在线制作Loading图标的网站
• 断桥残雪爱墙系统上线
• jQuery1.4正式版新功能及性能测试
• CSS清除浏览器默认样式注意点
• 送给你的TA另类的礼物，定要TA感动——爱墙
• 最新版WINDOWS 7 SP1下载地址出现
• UTF-8页面引用外部编码为GBK的JS文件编码的处理

© 三水清 for 三水清, 2008. | 9 comments |在微博关注我：@清-三水清
收藏到： 人人网 | 豆瓣 | 开心网 | QQ书签 | 新浪微博 | 腾讯微博
Post tags: ajax, dedecms, js

猜你喜欢：
Ajax评论bug更新	终于搞明白yu.js的使用方法啦~	垃圾违禁评论自动屏蔽功能上线~	自己写的DeDeCMS v5.3三级菜单
无觅

随机文章

• nodejs教程：安装express及配置app.js文件
• 新浪微博应用：微博送大礼
• 王老师突然问：考研吗？
• 重装系统啦~看看桌面截图吧~
• 使用Apache htpasswd.exe来管理SVN帐户
• 如何写出高质量的Javascript代码
• 樱花草，假如爱有天意
• linux安装PHP加速器eAccelerator

© 三水清 for 三水清, 2008. | No comment |在微博关注我：@清-三水清
收藏到： 人人网 | 豆瓣 | 开心网 | QQ书签 | 新浪微博 | 腾讯微博
Post tags: ajax, dedecms, 评论

猜你喜欢：
万众期待的Ajax评论发布啦-dedecms扩展工具	Ajax评论bug更新	Ajax文章评论上线！	自己写的DeDeCMS v5.3三级菜单
无觅

再次感谢阿海~

随机文章

• 最新版WINDOWS 7 SP1下载地址出现
• CSS 3.0 参考手册 (中文版)下载
• jQuery插件wBox准备更新
• 网站首页做完了~i.2fool.cn
• IE6 PNG图片不透明问题的解决方法
• 最近很多找我做站的~
• iframe自适用高度代码
• JS的Image对象可用于检测图片类型是否合法

© 三水清 for 三水清, 2008. | No comment |在微博关注我：@清-三水清
收藏到： 人人网 | 豆瓣 | 开心网 | QQ书签 | 新浪微博 | 腾讯微博
Post tags: ajax, js

猜你喜欢：
万众期待的Ajax评论发布啦-dedecms扩展工具	用document.domain+iframe实现Ajax跨子域	关于Ajax在浏览器中产生前进后退的实现方法	使用hash来实现Ajax前进后退
无觅