阿贾克斯&链接降级

时间:2011-08-24 18:24:17

标签: javascript jquery ajax

我通过Ajax加载HTML页面。这些文件没有<title><head><body>个标签,等等。只有几个div。

目前,我在我的href中为这些禁用JS的浏览器放置了这些ajax页面的链接:

<a href="assets/ajax/honda.html">Honda</a>

javascript有return false,因此如果用户的浏览器支持javascript,则系统永远不会将用户带到该页面。

我担心的是人们可能会右键单击并将这些链接发送给其他人。哪个看起来很糟糕,因为它没有样式,等等。我很想删除href链接因为这个。

是否有混淆链接的替代方案?在完全从href中删除链接的最佳做法违背了我的理想。

4 个答案:

答案 0 :(得分:3)

  

完全从href中删除链接的做法违背了我的理想。

我也努力遵循最佳做法,但你所做的实际上比不包括href更糟糕。

href属性只应用于用户可以直接访问的网址。使用它来保存用于Ajax的URL是常见的(Stack Overflow does it),但它是对href属性的误用。

如果可能,href应指向一个完整页面,其中包含将由Ajax加载的内容。如果您无法提供,请移除href或将其设置为"#"

答案 1 :(得分:2)

您不需要对其进行模糊处理,我也认为您不需要将其删除。如果您使用的是服务器端语言,则可以检查

X-Requested-With: XMLHttpRequest

每页中的HTTP标头。如果没有设置,则没有使用Ajax请求。然后,您可以将用户重定向到右侧页面。

答案 2 :(得分:1)

一个可以正常运行但包含一些工作的解决方案是为内容创建降级页面。您可以创建完整HTML文档的页面副本,并在链接中使用它们的URL,例如:

<a href="assets/view/honda.html">Honda</a>

使用AJAX获取内容时,您可以使用view替换网址中的ajax

这样页面也会被网页抓取工具编入索引。

答案 3 :(得分:0)

也许您可以使用data标记在div中使用mocklink样式存储/检索您的值。 FIDDLE

像这样。

<div class="mockLink" data-link="/test/link/honda.html">Honda</div>

CSS

div.mockLink{color:blue; text-decoration:underline}
div.mockLink:hover{cursor:pointer;}

JS

$('div.mockLink').click(function(){
   alert($(this).data('link')) ;
   //do AJAX
});