HỏiLoad ajax hiển thị URL giống phonho

34 bài đăng
04.07.2017 / 15:47
hoangvu
Bài đăng: 15
Member

Cho mình hỏi làm sao để load các trang giống Phố nhỏ mà vẫn hiển thị url.

Vì mình dùng thì url có dạng index.html/#abc

cảm ơn các bạn

Đã chỉnh sửa. hoangvu (04.07.2017 / 15:47)
04.07.2017 / 15:48
hoangvu
Bài đăng: 15
Member

@MrKen chỉ mình với bạn

04.07.2017 / 15:58
MrKen
Bài đăng: 2653
Trùm!
Vẫn là A N H

Sử dụng HTML5 History API nhé. Xem thêm tại: https://developer.mozilla.org/ ... y_API

Tạo demo theo hướng dẫn: https://developer.mozilla.org/ ... ample

04.07.2017 / 17:08
hoangvu
Bài đăng: 15
Member
MrKen đã viết

Sử dụng HTML5 History API nhé. Xem thêm tại: https://developer.mozilla.org/ ... y_API

Tạo demo theo hướng dẫn: https://developer.mozilla.org/ ... ample

cảm ơn bạn. Tuyệt quá

04.07.2017 / 17:13
hoangvu
Bài đăng: 15
Member
MrKen đã viết

Sử dụng HTML5 History API nhé. Xem thêm tại: https://developer.mozilla.org/ ... y_API

Tạo demo theo hướng dẫn: https://developer.mozilla.org/ ... ample

Vậy Phố nhỏ dùng ajax để load toàn bộ sau đó dùng HTML5 History API để lưu lịch sử vào trình duyệt đúng không bạn. Mong bạn giải đáp giúp mình. Mình đang cần cái này

04.07.2017 / 17:22
MrKen
Bài đăng: 2653
Trùm!
Vẫn là A N H

đúng rồi bạn. tuy nhiên cái này không hỗ trợ tất cả mọi trình duyệt nên bạn cần chú ý khi sử dụng

04.07.2017 / 17:32
hoangvu
Bài đăng: 15
Member
MrKen đã viết

đúng rồi bạn. tuy nhiên cái này không hỗ trợ tất cả mọi trình duyệt nên bạn cần chú ý khi sử dụng

mình vẫn chưa hiểu lắm. mình đã thử thêm script của code mẫu vào trang nhưng khi load thì nó vẫn tải lại hết tất cả file. còn Phố nhỏ thì mình thấy mỗi lần load page khác thì không tải lại toàn bộ.

04.07.2017 / 17:51
MrKen
Bài đăng: 2653
Trùm!
Vẫn là A N H

đoạn script đó chỉ hoạt động trong source mẫu thôi. bạn tạo hết các file theo demo để hiểu cách hoạt động của nó.

còn muốn kiểu mì ăn liền thì dùng code này

JAVASCRIPT
  1. (function(t,n,e){"use strict";function i(n,e){this.element=n,this.options=t.extend({},o,e),this._defaults=o,this._name=a,this.init()}var a="pusher",o={watch:"a",initialPath:n.location.pathname,before:function(t){t()},handler:function(){},after:function(){},fail:function(){n.alert("Failed to load "+this.state.path)},onStateCreation:function(){}};i.prototype={init:function(){var e=this;if(history.pushState){var i=r({path:e.options.initialPath},e.options.onStateCreation);history.replaceState(i,null,i.path),t(e.element).on("click",e.options.watch,function(n){n.preventDefault();var i=r({path:t(this).attr("href"),elem:t(this)},e.options.onStateCreation);s(e,i,!0)}),n.addEventListener("popstate",function(t){s(e,t.state)})}}};var r=function(t,n){var e={};return t=t||{},e.path=t.path,e.time=(new Date).getTime(),n&&n(e,t.elem),e},s=function(n,e,i){if(e){var a={state:e,get:function(t){return u(a.res,t)},updateText:function(n){var e=t(n);this.get(n).each(function(n){var i=t(this).text();e.eq(n).text(i)})},updateHtml:function(n){var e=t(n);this.get(n).each(function(n){var i=t(this).contents();e.eq(n).html(i)})}},o=function(){t.ajax({type:"GET",url:e.path}).done(function(t){a.res=t,i&&history.pushState(e,null,e.path),n.options.handler.apply(a)}).fail(function(){n.options.fail.apply(a)}).always(function(){n.options.after.apply(a)})};n.options.before.apply(a,[o])}},u=function(n,e){var i=t("<root>").html(n),a=i.find(e);return a};t.fn[a]=function(n){t.data(e,"plugin_"+a)||t.data(e,"plugin_"+a,new i(this,n))}})(jQuery,window,document);
  2. $(document).pusher({
  3. handler: function() {
  4. this.updateText("title");
  5. this.updateHtml("#content");
  6. }
  7. });

Code này cần thư viện jQuery để hoạt động.

Thay #content thành id phần nội dung chính của trang

Muốn update nội dung phần nào thì sử dụng hàm updateText hoặc updateHtml như trên

04.07.2017 / 20:56
hoangvu
Bài đăng: 15
Member
MrKen đã viết

đoạn script đó chỉ hoạt động trong source mẫu thôi. bạn tạo hết các file theo demo để hiểu cách hoạt động của nó.

còn muốn kiểu mì ăn liền thì dùng code này

JAVASCRIPT
  1. (function(t,n,e){"use strict";function i(n,e){this.element=n,this.options=t.extend({},o,e),this._defaults=o,this._name=a,this.init()}var a="pusher",o={watch:"a",initialPath:n.location.pathname,before:function(t){t()},handler:function(){},after:function(){},fail:function(){n.alert("Failed to load "+this.state.path)},onStateCreation:function(){}};i.prototype={init:function(){var e=this;if(history.pushState){var i=r({path:e.options.initialPath},e.options.onStateCreation);history.replaceState(i,null,i.path),t(e.element).on("click",e.options.watch,function(n){n.preventDefault();var i=r({path:t(this).attr("href"),elem:t(this)},e.options.onStateCreation);s(e,i,!0)}),n.addEventListener("popstate",function(t){s(e,t.state)})}}};var r=function(t,n){var e={};return t=t||{},e.path=t.path,e.time=(new Date).getTime(),n&&n(e,t.elem),e},s=function(n,e,i){if(e){var a={state:e,get:function(t){return u(a.res,t)},updateText:function(n){var e=t(n);this.get(n).each(function(n){var i=t(this).text();e.eq(n).text(i)})},updateHtml:function(n){var e=t(n);this.get(n).each(function(n){var i=t(this).contents();e.eq(n).html(i)})}},o=function(){t.ajax({type:"GET",url:e.path}).done(function(t){a.res=t,i&&history.pushState(e,null,e.path),n.options.handler.apply(a)}).fail(function(){n.options.fail.apply(a)}).always(function(){n.options.after.apply(a)})};n.options.before.apply(a,[o])}},u=function(n,e){var i=t("<root>").html(n),a=i.find(e);return a};t.fn[a]=function(n){t.data(e,"plugin_"+a)||t.data(e,"plugin_"+a,new i(this,n))}})(jQuery,window,document);
  2. $(document).pusher({
  3. handler: function() {
  4. this.updateText("title");
  5. this.updateHtml("#content");
  6. }
  7. });

Code này cần thư viện jQuery để hoạt động.

Thay #content thành id phần nội dung chính của trang

Muốn update nội dung phần nào thì sử dụng hàm updateText hoặc updateHtml như trên

Nếu vậy thì làm sao để ajax bắt hành động mà chạy bạn. Như mình thấy Phố Nhỏ:

Link Diễn đàn href="https://phonho.net/forum/", không có id

thì khi nhấp vào này mà load ajax nội dung tại <div id="body" class="maintxt container">

Mình chưa hiểu cái này lắm

05.07.2017 / 04:15
MrKen
Bài đăng: 2653
Trùm!
Vẫn là A N H

bạn chèn thử code đó chưa? nó tự động hết mọi thứ cho bạn luôn, khỏi cần nghiên cứu gì.muốn load nội dung ở phần nào thì chỉ cần dùng hàm updateHtml cho phần đó như trong code trên, ví dụ muốn load id="body" thì dùng updateHtml('#body')