AJAX Links Not Detected By A:Visited

爱⌒轻易说出口 提交于 2019-12-05 15:50:42

You probably need to change the location.hash if you want it to work with history and visited links styling.

Keep in mind that the visited links styling works somewhat inconsistently between browser after the visited links based browsing history privacy vulnerability was made popular by Did You Watch Porn website.

a:visited matches any link that points to a URL that is in the browser history.

If you use AJAX to cancel navigation to the URL, the URL will never end up in the browser history.

You can fix that by using # links.

a:visited is only triggered if the link is 'executed'.

A link to an AJAX call usually returns 'false' (The solution with a hash (<a href="#">link</a>) still returns false otherwise the user would jump to top of page).

That way the link is never being 'executed', therefore not being marked as visited.

Okay, please don't change a element's href to point to a hashed url like the other answerers are saying - that will break the user experience. If they want to open in new window it will then need to double load, if you do the change server-side it will break search engines and js-disabled users.

The issue is that if you are using hashes to upgrade your website into a RIA (rich internet application) then the links will point to mysite.com/page but you actually access mysite.com/#/page so you don't actually visit the original.

The proper solution here is to use the HTML5 History API, which allows you to change the URL directly and hook into URL changes (so there is no longer a need for hashes). You can read more about the pros and cons of hashes vs hashbangs vs HTML5 History API here: https://github.com/browserstate/history.js/wiki/Intelligent-State-Handling - it also includes sample code to upgrade your website with the HTML5 History API too.

jQuery Mobile is scheduled to use to the HTML5 History API in the future (it's currently being worked on), but for now I'd suggest waiting it this is implemented.

You can always set a class on the link via the ajax callback that shares the style with a:visited.

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!