yiminghe

浏览: 1465560 次
性别:
来自: 上海

最近访客更多访客>>

akingde

xmg25

xiaolan02

archerfrank

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

XHR与浏览器导航冲突解决方案

博客分类：

javascript

浏览器 Firefox IE Chrome Ajax

研究 gmail 有感

理论：

历史：

最早没有 xhr 的时候，要想得到无刷新的用户体验，唯一的方法就是隐藏帧技术（frame） ,发展到现在的 iframe，这个技术仍然有它的使用场景，即在文件上传以及简单情况下浏览器的前进后退导航功能上。

使用：

当一个页面嵌入一个iframe时，当javascript变动iframe的src（或者操作document open 与 close），会在浏览器上生成一条历史记录，点击后退的话，主页面没有变化，但是iframe会加载历史记录中的上一条src（或者文档），因此可以解决传统用户体验的浏览器导航部分。

适用范围：

一般用于界面切换，当界面有大的变化，且没有修改或删除操作时，可以由用户点击浏览器的返回操作来达到上一个操作界面。

技术描述：(firefox 适用，ie不适用)

主页面 javascript 设置里面的 iframe 的 src （向服务器传递信息），当iframe 加载完毕后，在iframe的页面调用主页面的回调函数，达到更新主页面的作用，并向浏览器添加一条历史记录。当用户点击后退后，iframe会加载历史记录的上一条页面，重新调用上一个页面所应该的主页面callback，修改主页面到上一个功能界面，达到是主页面回退的效果. iframe 一般是设置样式 display:none，排除在文档流中，不参与用户界面。

示例 (firefox 适用)：

主页面：index.html

<iframe id='i' style='display:none'></iframe>
<div id='d'></div>
<div id='d2'></div>
<input type='button' onclick='bclick();' value='change'/>
<script>
	var ii=0;
	function callback(str){
		//alert(ii);
		document.getElementById('d').innerHTML='iframe call back :'+str;
	}
	
	function bclick() {
		document.getElementById('d2').innerHTML='mimic ajax '+ii;
		document.getElementById('i').src='iframe.html?i='+(ii++);
	}
	
	window.onload=function(){
		document.getElementById('i').src='iframe.html';
	}
	</script>

隐藏帧页面 :iframe.html

<script>
	window.onload=function(){
		parent.callback(window.location);
		
	}	
</script>

实战（多浏览器解决方案）

根据 advanced dom scripting 以及 YUI YAHOO.util.History 提出的方案，可以解决浏览器导航问题以及书签功能。

对于 firefox,ie8 可以直接给url添加 hash ，则firefox,ie8会把变动的 url加到浏览器history中，而ie6,7 则不会。

firefox

每次操作添加 hash 到 url，并后台 setInterval 监控 url hash 的变化，根据当前的hash 进行 ajax 操作，（用户点击后退只会改变hash值。）

updated 2010-12-29 :

firefox chrome 已经支持 hashchange 事件，不再需要定时器监控了，监听事件即可。

ie 6,7

设置隐藏的iframe，每次操作用脚本设置iframe的内容 (注意：如果仅仅设置 src 参数 ?x=xx 不同，ie6,7 并不会产生历史纪录，必须src不同，直接脚本产生 iframe 新document（open,write,close）也可以产生历史纪录)，将当前hash 插入到生成的iframe内容中，后台监控 setInterval iframe 内容中 hash 的变化，如果变化（用户点击后退会使当前页面iframe的内容变化），则提取hash值，添加到主页面url，执行相关ajax 操作。

YUI BHM 相关操作：

/**
     * Update the IFrame with our new state.
     *
     * @method _updateIFrame
     * @private
     * @return {boolean} true if successful. false otherwise.
     */
    function _updateIFrame (fqstate) {

        var html, doc;

        html = '<html><body><div id="state">' + fqstate + '</div></body></html>';

        try {
            doc = _histFrame.contentWindow.document;
            doc.open();
            doc.write(html);
            doc.close();
            return true;
        } catch (e) {
            return false;
        }
    }

关键是 open() ,close() 会增加历史 ，之后可以将数据附在 doc 上，后退的话数据就会回来，但是注意 close() 后会触发 iframe load 事件，yui3 采用 hash 来存储数据：

HistoryHash._updateIframe = function (hash, replace) {
        var iframeDoc      = iframe.contentWindow.document,
            iframeLocation = iframeDoc.location;


        iframeDoc.open().close();

        if (replace) {
            iframeLocation.replace(hash.charAt(0) === '#' ? hash : '#' + hash);
        } else {
            iframeLocation.hash = hash;
        }
    };

ie8

很简单，由于有相关事件直接监控 Hash 变动即可，不用像firefox一样轮循查看：

if (YAHOO.env.ua.ie) {

            if (typeof document.documentMode === "undefined" || document.documentMode < 8) {

                // IE < 8 or IE8 in quirks mode or IE7 standards mode
                //利用 iframe 来生成历史纪录
                _checkIframeLoaded();

            } else {

                // IE8 in IE8 standards mode
                //直接利用特有事件
                YAHOO.util.Event.on(top, "hashchange",
                    function () {
                        var hash = _getHash();
                        _handleFQStateChange(hash);
                        _storeStates();
                    });

                _initialized = true;
                YAHOO.util.History.onLoadEvent.fire();

            }

        } else {
            //其他浏览器，轮训hash值变化
            // Start the thread that will have the responsibility to
            // periodically check whether a navigate operation has been
            // requested on the main window. This will happen when
            // YAHOO.util.History.navigate has been called or after
            // the user has hit the back/forward button.

            // On Safari 1.x and 2.0, the only way to catch a back/forward
            // operation is to watch history.length... We basically exploit
            // what I consider to be a bug (history.length is not supposed
            // to change when going back/forward in the history...) This is
            // why, in the following thread, we first compare the hash,
            // because the hash thing will be fixed in the next major
            // version of Safari. So even if they fix the history.length
            // bug, all this will still work!
            counter = history.length;

            // On Gecko and Opera, we just need to watch the hash...
            hash = _getHash();

            setInterval(function () {

                var state, newHash, newCounter;

                newHash = _getHash();
                newCounter = history.length;
                if (newHash !== hash) {
                    hash = newHash;
                    counter = newCounter;
                    _handleFQStateChange(hash);
                    _storeStates();
                } else if (newCounter !== counter && YAHOO.env.ua.webkit) {
                    hash = newHash;
                    counter = newCounter;
                    state = _fqstates[counter - 1];
                    _handleFQStateChange(state);
                    _storeStates();
                }

            }, 50);

书签问题：

多个浏览器都可以通过，添加书签附带了当前页面的hash值。载入书签时，首先读取Hash值进入相应的ajax操作。

demo:

updated : 2010-12-29

由于 ie>7 以及 firefox ,chrome 都已经支持 hashchange 事件以及历史存储，那么实际上难点就是 ie6,7 下使用 iframe 来记录导航历史：

simple hashchange for ie6,7 @ google code

kissy 采用先进的事件补丁技术优雅地解决了这个问题，在任何浏览器下都可以直接：

function t() {
        alert("current hash :" + window.location.hash);
    }
    KISSY.Event.on(window, "hashchange", t);

即可！

PS：html5 提出了新的标准 ，目前 chrome 下已经实现：

session history and navigation

github 也做了尝试：

how to rewrite url without refresh like github

PS2: 如果不想使得修改 hash 而引起浏览器增加历史记录，可使用 location.replace('#xx') ，对于 ie6,7 模拟的iframe，情况则只需要只修改 body 的 innerHtml :

iframe.contentWindow.document.body.innerHTML='#xx'

0
顶

0
踩

分享到：

CalendarLite 轻量级的Ext 日历 | setTimeout ,xhr,event 线程问题

2009-05-01 18:08
浏览 2969
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

XHR与浏览器导航冲突解决方案

demo:

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

XHR与浏览器导航冲突解决方案

demo:

评论

发表评论

相关推荐

continuation, cps

一种基于匹配回朔的 css3 选择器引擎实现

cubic-bezier 模拟实现

构建前端 DSL

Get cursor position and coordinates from textarea

兼容 ie 的 transform

promise api 与应用场景

closure compiler 代码优化实例

write html parser

获取剪贴板数据

url 映射问题

tip：如何原生播放声音

转载：瀑布流布局浅析

cross domain request

基于多继承的树设计

caja 原理 : 前端

tokenization of html

ie 下 cloneNode 导致的属性克隆

循环引用下的深度克隆

模块的静态与动态循环依赖

最近访客更多访客>>