用标签发送邮件
Popstate with Hashtags?
本文关键字:标签 更新时间:2023-09-26
我有一个使用AJAX动态加载内容到div的站点。
这样做的链接是带有href="#"的锚和一个触发AJAX的onclick事件。
这使得我在点击返回时没有历史记录,所以如果我加载一个页面,然后另一个页面并点击返回,它什么也不做。
代码的基本版本是这样的:<script type="text/javascript">
function loadXMLDoc(url)
{
<!-- Load XML Script here. -->
}
</script>
</head>
<body>
<div id="myDiv">
<!-- Target div. -->
</div>
<a href="#1" onclick="loadXMLDoc('1.txt')">Click Me.</a>
<a href="#2" onclick="loadXMLDoc('2.txt')">Click Me.</a>
<a href="#3" onclick="loadXMLDoc('3.txt')">Click Me.</a>
</body>
我想知道的是,我可以给每个链接一个不同的"#",然后使用popstate处理程序调用相应的事件,所以如果我点击链接1,2,然后3,然后开始点击后退按钮,它会回到2,然后1等等。
我本来打算使用history.js并开始在loadXML脚本中使用pushstate,但我认为整个操纵历史的事情有点肮脏和不可靠。
我想的对吗?还是有更好的方法?
目前我所有的链接都使用"#",以便在加载更多内容时它会弹出到页面顶部,但我希望能够回到如果可能的话
浏览器正确保存标签到历史记录。只要在这个问题页面上添加标签#1,按回车键,把它改成#2,按回车键,把它改成#3,按回车键。现在单击后退按钮,您将看到哈希值从#3更改为#2。我建议在链接点击时只更改哈希本身,并对页面哈希更改和页面加载事件做出反应。
function react() {
var hash = window.location.hash.replace("#", "");
loadXMLDoc(hash + ".txt");
};
document.body.onload = function() {
react();
window.onhashchange = react;
};
<a href="#1">Click me</a>
<a href="#2">Click me</a>
<a href="#3">Click me</a>
请注意,旧的IE不支持onhashchange
事件。如果你想要处理它,唯一的方法就是用setInterval定义计时器,并检查哈希是否相等。
尝试使用LocalStorage和HistoryAPI的组合。当您加载XMLDoc时,将其存储在LocatStorage中,当返回时按下-从存储加载数据,而不是从web加载数据。上面的位码。
/* Handling history.back added */
window.onpopstate = function(event) {
yourHandleBackFunction(event.state);
};
function yourHandleBackFunction(renderTs) {
/*Check TS and load from localStorage if needed*/
};
相关文章:
- 在<页眉>标签
- Ckeditor-plugin:插入虚假元素add不情愿<p>标签前后
- iframe正在添加标签,需要删除它们
- 如何自动调整标签的高度以适应内容
- Jquery标签插件粘贴问题
- Twitter引导程序Typeahead-Id&标签
- Highcharts-如何在自定义格式化程序中获得默认的y轴标签格式化程序
- Morris.js折线图x轴标签在调整大小后消失
- JavaScript goto 标签如何使用内部循环
- 显示某个用户ID的某个标签的30张Instagram图片
- 标签客户端的设置值
- 谷歌图表显示所有标签
- 如何在图片和边缘之间居中设置标签
- 在Datatables中设置本地化后,需要更改标签文本
- 第二组标签及其内容赢得'默认情况下t加载
- 在一个javascript文件中为整个网站创建标签
- 兰吉 |如何在 span 标签上使用单击事件删除突出显示的文本
- Knockout.JS标签在foreach内部不起作用
- 如何在离子框架+有角度的框架中制作顶部标签
- 是否可以自动拉取“随机”;标签“;从一长串文本中提取