CodeIgniter + jQuery（ajax）+ HTML5 pushstate：如何使用真实的URL进行干净的导航？ [英] CodeIgniter + jQuery(ajax) + HTML5 pushstate: How can I make a clean navigation with real URLs?

问题描述

我目前正试图建立一个新的网站，没有什么特别的，好，小，但我被困在一开始。
我的问题是干净的URL和页面导航。我想要以正确的方式。

I'm currently trying to build a new website, nothing special, nice and small, but I'm stuck at the very beginning. My problems are clean URLs and page navigation. I want to do it "the right way".

我想要的：

• 我使用CodeIgniter来获取完整的网址，例如
  www.example.com/hello/world


• jQuery帮助我使用ajax，所以我可以
  .load（）额外的内容


• 现在我想使用像pushstate这样的HTML5功能
  URL中的＃

应该可以在不刷新页面的情况下来回查看，但页面仍会显示正确的内容根据当前URL。

It should be possible to go back and forth without a page refresh but the page will still display the right content according to the current URL.

它也应该是可以重新加载页面，而不会收到404错误。该网站应该存在感谢CodeIgniter。 （有控制器和视图）

It should also be possible to reload a page without getting a 404 error. The site should exist thanks to CodeIgniter. (there is a controller and a view)

例如：

基本网站。两个链接，称为foo和bar和一个emtpy div框下面。
基本URL是example.com

当您点击foo时，网址将更改为example.com/foo而不重新加载，并且div框获取新内容与jQuery .load（）。对于其他链接也是如此，当然不同的内容和URL。

点击foo，然后bar后的按钮将带我回到example.com/foo 与相应的内容。如果我直接加载这个链接或刷新页面，它将看起来一样。没有404错误或其他问题。

For example:
A very basic website. Two links, called "foo" and "bar" and a emtpy div box beneath them. The basic URL is example.com
When you click on "foo" the URL changes to "example.com/foo" without reloading and the div box gets new content with jQuery .load(). The same goes for the other link, just of course different content and URL.
After clicking "foo" and then "bar" the back button will bring me back to "example.com/foo" with the according content. If I load this link directly or refresh the page, it will look the same. No 404 error or something.

只要想想这个网页，并告诉我如何做。
我真的很喜欢有这种导航，所以我尝试了几件事。

Just think about this page and tell me how you would do this. I would really love to have this kind of navigation and so I tried several things.

到目前为止...

我知道如何使用CodeIgniter来获取这样的URL。我知道如何使用jQuery加载额外的内容，虽然我不完全理解html5 pushstate的东西，我至少得到它的工作方式。
但是我不能让它一起工作。
我的代码现在是一个烂摊子，这就是为什么我真的不想张贴在这里。我看了不同的教程和复制粘贴一些代码在一起。

So far...
I know how to use CodeIgniter to get the URLs like this. I know how to use jQuery to load additional content and while I don't fully understand the html5 pushstate stuff, I at least got it to work somehow. But I can't get it to work all together. My code right now is a mess, that's the reason I don't really want to post it here. I looked at different tutorials and copy pasted some code together. Would be better to upload my CI folder I guess.

我看过的一些教程：

• 深入HTML5


• HTML5演示


• Mozilla操纵浏览器历史


• Saner HTML5历史


• Github：History.js

• Dive into HTML5
• HTML5 demos
• Mozilla manipulating the browser history
• Saner HTML5 history
• Github: History.js

（已达到的链接数量：/）

(max. number of links reached :/)

我认为我的主要问题是，每个人都试图使其与所有浏览器兼容，不同的版本，添加脚本/ jQuery插件和whatnot，我被所有的额外的代码困惑。在我的脚本标签和实际的html内容之间有更多的代码。
可能有人在我的示例页面上发布了最基本的如何使用HTML5的方法吗？

I think my main problem is, that everybody tries to make it compatible with all browsers and different versions, adds scripts/jQuery plugins and whatnot and I get confused by all the additional code. There is more code between my script-tags then actual html content. Could somebody post the most basic method how to use HTML5 for my example page?

失败的attem：

在我的测试页上，当我返回时，网址会更改，但div框仍会显示相同的内容，而不是旧的。我也不知道如何根据链接的href属性更改脚本中的URL。有什么像$（this）.attr（'href'），根据我点击哪个链接而改变？现在我必须为每个链接使用一个脚本，这当然是坏的。
当我刷新网站时，CodeIgniter启动并加载视图，但实际上只有视图本身，我加载的ajax，而不是整个页面。但我想这应该很容易解决与布局和正确的控制器设置。

My failed attemp:
On my test page, when I go back, the URL changes, but the div box will still show the same content, not the old one. I also don't know how to change the URL in the script according to the href attribute from the link. Is there something like $(this).attr('href'), that changes according to which link I click? Right now I would have to use a script for every link, which of course is bad. When I refresh the site, CodeIgniter kicks in and loads the view, but really only the view by itself, the one I loaded with ajax, not the whole page. But I guess that should be easy to fix with a layout and the right controller settings. Haven't paid much attention to this yet.

感谢您提供任何帮助。
如果你有建议，想法或简单只是想提一些东西，请让我知道。

Thanks in advance for any help. If you have suggestions, ideas, or simple just want to mention something, please let me know.

关注

DiLer

regards
DiLer

推荐答案

我在这里建立了一个成功的HTML5历史最小示例： http://cairo140.github.com/html5-history-example/one.html

I've put up a successful minimal example of HTML5 history here: http://cairo140.github.com/html5-history-example/one.html

进入HTML5 pushstate的最简单的方法是忽略框架一段时间，并使用最简单的状态转换可能：批量替换< body> 和< title> 元素。除了这些元素，其余的标记可能只是样板，虽然如果它变化（例如，如果你改变HTML上的类在后端），你可以适应。

The easiest way to get into HTML5 pushstate in my opinion is to ignore the framework for a while and use the most simplistic state transition possible: a wholesale replacement of the <body> and <title> elements. Outside of those elements, the rest of the markup is probably just boilerplate, although if it varies (e.g., if you change the class on HTML in the backend), you can adapt that.

CI之类的动态后端实际上是通过动态生成动态的，在特定位置（由URL识别）假冒数据的存在。我们可以通过逐字地创建资源并将它们放置在您的Web服务器（Apache，可能）通过它们来简单地标识它们并通过它们进行馈送的位置来抽象化远离框架的效果。我们将有一个非常简单的文件系统结构相对于域根：

What a dynamic backend like CI does is essentially fake the existence of data at particular locations (identified by the URL) by generating it dynamically on the fly. We can abstract away from the effect of the framework by literally creating the resources and putting them in locations through which your web server (Apache, probably) will simply identify them and feed them on through. We'll have a very simple file system structure relative to the domain root:

/one.html
/two.html
/assets/application.js

这些是我们唯一的三个文件使用。

Those are the only three files we're working with.

以下是两个HTML文件的代码。如果你在处理HTML5的功能，你应该能够理解的标记，但如果我没有做清楚，只是留下评论，我会带你通过它的水平： / p>

one.html

Here's the code for the two HTML files. If you're at the level when you're dealing with HTML5 features, you should be able to understand the markup, but if I didn't make something clear, just leave a comment, and I'll walk you through it:

<!doctype html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
    <script src="assets/application.js"></script>
    <title>One</title>
  </head>
  <body>
    <div class="container">
      <h1>One</h1>
      <a href="two.html">Two</a>
    </div>
  </body>
</html>

two.html

two.html

<!doctype html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
    <script src="assets/application.js"></script>
    <title>Two</title>
  </head>
  <body>
    <div class="container">
      <h1>Two</h1>
      <a href="one.html">One</a>
    </div>
  </body>
</html>

您会注意到，如果您加载 one.html 通过浏览器，您可以单击 two.html 的链接，这将加载并显示一个新页面。从 two.html ，您可以返回 one.html 。

You'll notice that if you load one.html through your browser, you can click on the link to two.html, which will load and display a new page. And from two.html, you can do the same back to one.html. Cool.

现在，对于历史部分：

$(function(){
    var replacePage = function(url) {
        $.ajax({
            url: url,
            type: 'get',
            dataType: 'html',
            success: function(data){
                var dom = $(data);
                var title = dom.filter('title').text();
                var html = dom.filter('.container').html();
                $('title').text(title);
                $('.container').html(html);
            }
        });
    }

    $('a').live('click', function(e){
        history.pushState(null, null, this.href);
        replacePage(this.href);
        e.preventDefault();
    });

    $(window).bind('popstate', function(){
        replacePage(location.pathname);
    });
});

工作原理

code> replacePage 在jQuery ready回调中，在参数中做一些简单的URL加载，并替换 title

How it works

I define replacePage within the jQuery ready callback to do some straightforward loading of the URL in the argument and to replace the contents of the title and .container elements with those retrieved remotely.

生活 c> call表示任何链接点击页面将触发回调，回调将状态推送到链接中的 href ，并调用 replacePage 。它还使用 e.preventDefault 来防止链接被正常处理。

The live call means that any link clicked on the page will trigger the callback, and the callback pushes the state to the href in the link and calls replacePage. It also uses e.preventDefault to prevent the link from being processed the normal way.

最后， code> popstate 事件，当用户使用基于浏览器的页面导航（后退，转发）时触发。我们绑定一个简单的回调到该事件。值得注意的是，我无法得到的版本的潜水到HTML页面上的工作原因为FF for Mac的某些原因。没有线索。

Finally, there's a popstate event that fires when a user uses browser-based page navigation (back, forward). We bind a simple callback to that event. Of note is that I couldn't get the version on the Dive Into HTML page to work for some reason in FF for Mac. No clue why.

这个极其基本的例子可以或多或少地移植到任何网站，因为它做一个非常uncreative转换：HTML替换。我建议你可以使用它作为一个基础，并过渡到更多的创意过渡。你可以做的一个例子是模拟Github使用它的存储库中的目录导航。它是一个需要浮点和溢出管理的中间任务。您可以从一个更简单的转换开始，例如将加载页面中的 .container 附加到DOM，然后将旧容器动画化为 {height：0}

This extremely basic example can more or less be transplanted onto any site because it does a very uncreative transition: HTML replacement. I suggest you can use this as a foundation and transition into more creative transitions. One example of what you could do would be to emulate what Github does with the directory navigation in its repositories. It's an intermediate manoever that requires floats and overflow management. You could start with a simpler transition like appending the .container in the loaded page to the DOM and then animating the old container to {height: 0}.

使用HTML5历史记录的正确轨道，但你需要澄清你的想法，确切地 / foo 和 / bar 。基本上，您将有三个页面： / ， / foo 和 / bar 。 / 将有一个空容器div。 / foo 将与 / 相同，除了容器div中有一些foo内容。 / bar 将与 / foo 相同，除了容器div中有一些栏内容。现在，问题是如何通过Javascript提取容器的内容。假设您的 / foo 标签看起来像这样：

You're on the right track for using HTML5 history, but you need to clarify your idea of exactly what /foo and /bar will contain. Basically, you're going to have three pages: /, /foo, and /bar. / will have an empty container div. /foo will be identical to / except in that container div has some foo content in it. /bar will be identical to /foo except in that the container div has some bar content in it. Now, the question comes to how you would extract the contents of the container through Javascript. Assuming that your /foo body tag looked something like this:

<body>
  <a href="/foo">foo</a>
  <a href="/bar">bar</a>
  <div class="container">foo</div>
</body>

然后，您将从响应 data 通过 var html = $（data）.filter（'。container'）。html（），然后通过 $（'。container'）。html（html）。你使用 filter 而不是更合理的 find ，因为从一些古怪的原因，jQuery的DOM解析器产生一个jQuery对象头的每个孩子和 body 元素的每个孩子，而不是只包含 html 元素。我不知道为什么。

Then you would extract it from the response data through var html = $(data).filter('.container').html() and then put it back into the parent page through $('.container').html(html). You use filter instead of the much more reasonable find because from some wacky reason, jQuery's DOM parser produces a jQuery object containing every child of the head and every child of the body elements instead of just a jQuery object wrapping the html element. I don't know why.

其余的只是适应这回到上面的香草版本。

The rest is just adapting this back into the "vanilla" version above. If you are stuck at any particular stage, let me know, and I can guide you better though it.

https://github.com/cairo140/html5-history-example

这篇关于CodeIgniter + jQuery（ajax）+ HTML5 pushstate：如何使用真实的URL进行干净的导航？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！