2011-08-19 58 views
1

我正在开发一个页面,它大量使用jQuery在页面上动态创建元素。后退按钮会影响由jquery动态创建的元素

当我浏览到下一页然后单击后退按钮后,所有动态创建的元素在使用Chrome和IE时都会消失。

但是,在Firefox和Safari中,元素仍保留在页面上。

如何让Chrome和IE显示与Firefox和Safari相同的行为?

感谢

+2

也许你可以添加一些代码或指向一个示例页面? –

+0

看起来像Firefox和Safari重新创建页面时完全没有重新分析HTML,而Chrome和IE重新分析HTML(实际上创建了一个全新的页面)。 – FloatLeft

+0

我最后做了什么实际上是使用页面中的AJAX调用来获取Session中的项目,并使用jQuery自己重新创建项目 – FloatLeft

回答

2

这里有一个简单的作弊:

抓住你的页面的innerHTML并将其分配给window.name。加载页面时,请检查您的数据是否在window.name。如果是,将其复制回DOM

1

我最后做了什么实际上是使用页面中的AJAX调用来从Session中获取项目,并使用jQuery自己重新创建项目。

0

通过设置window.sessionStorage来存储元素的内容,我可以在从返回按钮返回(使用Firefox)返回后恢复一些HTML。

这个例子类似:

<script> 
    if (sessionStorage.getItem("sessionHtml") != null) { 
     $('#sessionContent').html(sessionStorage.getItem("sessionHtml")); 
    } 

    window.onbeforeunload = function (event) { 
     $('#sessionContent').html('Data that's restored when you come back'); 
     sessionStorage.setItem("sessionHtml", $('#sessionContent').html()); 
    } 
</script> 

<body> 
    <div id="sessionContent"></div> 
</body> 

重要:此方法不能当用户浏览或刷新页面区分。并且一旦sessionHtml中存储了一些内容,实际上会抑制页面被新数据刷新的能力。如果你的网页是动态的,这可能不是什么大不了的事。

也许有人在那里可能会更好地理解如何实现一个好的独立于浏览器的方法来确定事件是刷新还是返回导航?