jQuery深入链接Web应用程序

问题...我想要构建一个具有深度链接的单页网络应用程序（点击URL以更改用户所在的位置），以便用户可以共享链接，书签等。 ..jQuery深入链接Web应用程序

与jQuery的烧烤插件的问题是，它需要将href有散在像HREF =“＃/照片/ 1”

这意味着我需要确保每一个URL在我应用程序以散列开头。而且，这意味着非JS浏览器将无法工作，因为这些URL都是哈希值。

有没有一种优雅的方式来完成一个深度链接的单页网页应用程序，它可以无缝工作于JS-&非JS浏览器，并且需要更少的代码更改？

感谢

来源

2010-10-04 AnApprentice

如果你想使用一个单一的URL结构，可以两个JS和非JS能够/启用浏览器，你可以检查浏览器是否支持JS并相应地改变导航链接。如果浏览器确实支持/启用了JS，则添加一个散列并使用window.location.hash检索页面。例如网址：

site.com/#photos/1

如果它不支持JS你的URL看起来像：

site.com/photos/1

这样，你只需要一个#添加到URL。这很容易做到，无论是在脚本本身中，还是在页面加载后使用jQuery更改页面上的链接。你可以使用（假设的Apache/PHP）Apache的ModRewrite的URL改写为这样的：

site.com/index.php?p=photos&show=1

说，第一次的网站加载和浏览器不支持JS，负载任何应加载正常的方式，取决于（在这种情况下）“页面”和“显示”变量。如果它不支持JS，你可以存储变量是这样的：

<div style="display:none;" id="page">photos</div> 
<div style="display:none;" id="show">1</div> 
<div id="content"></div>

，并在页面加载后，你火了jQuery和提取导航数据：

var page = $('#page').html(); 
var show = $('#show').html();

，做任何需要被完成显示正确的页面。

当您点击新链接时，您可以使用各种jQuery插件进行哈希导航，或者当没有JS并且链接中没有哈希时，页面将以普通方式加载。

为了防止代码重复，您需要设置您的页面，使其可以通过jQuery以正常方式和轻松显示。假设你有这样的照片页面，你可以不用JS浏览时，包括“photos.php”，用使用相同的文件的jQuery：

$.get(page + '.php', { 
    show: show 
}, function(data) { 
    $('#content').html(data); 
});

由于“photos.php”会看到完全一样的$_GET变量，输出将是相同的。

你将虽然得到一些重叠。如果您想显示/发布表单，例如你可能会以不同于通过jQuery处理这种情况的正常方式。处理表单数据的正常方式，并显示更新的页面。所以在“photos.php”的情况下，你会想要完整的输出。但是，当使用jQuery时，你只需要一个结果，例如说“完成”并更改页面而不完全重新加载。这可以通过向$.get（或$.post）函数添加更多变量来解决。

您可能想查看（PHP）MVC框架。当使用MVC设置时，您可以从视图中分离所有站点的逻辑（导航/数据库查询/等）（即站点上显示的内容）。它使得使用相同的逻辑非常简单，但单独使用的意见，在这种情况下，这是一个正常的站点，一个使用基于jQuery的导航。

最后，你必须问自己是否值得去经历所有这些麻烦。这个网站是谁的？这些人真的使用没有JavaScript的浏览器吗？是否真的有必要建立一个不依赖JS的网站？现在大多数人都在使用可以处理JS的浏览器，而且人们为了'安全原因'而禁用它的时间早已消失。维护一个站点的两个版本可能会占用大量时间和资源（取决于当然的大小），所以它可能不值得。在这种情况下，简单地显示一条消息或一个精简而简化的网站会更容易，他们表示用户应该踏入21世纪才能使用功能齐全的网站。

来源

2010-10-04 23:24:25 Alec

jQuery深入链接Web应用程序

回答

相关问题