2012-07-18 46 views
1

我不確定這是否可以在沒有任何服務器的JavaScript中完成。如何解析URL以進行搜索?

基本上,我使用Google Maps API在同一頁面上生成特定的搜索結果,我希望能夠創建分享按鈕,以便當用戶點擊它時,它會生成一個自定義鏈接www.example.com/?search=Anaheim。然後,當用戶或其他用戶將該網址輸入到地址欄中時,它將導致包含這些結果的頁面。

現在,我只在一個html頁面上進行搜索,並且我不確定如何製作它以便通過輸入鏈接,它可以更改我的一個html頁面的默認主頁位置?或者,這是不可能的,我應該做其他事情?

任何意見將不勝感激。謝謝!!

編輯:這可能是一種令人困惑的理解..但基本上,我希望能夠以同樣的方式生成鏈接,谷歌地圖生成它們,當你點擊鏈接按鈕。

回答

0

jQuery BBQAPI docs)是我最喜歡的工具來完成此操作。

只需添加一個事件偵聽器hashchange

$(window).bind('hashchange', function(e) { 
    var q = $.bbq.getState('q'); 
    if (q) { 
     // do your Google Maps search for `q` 
    } 
}); 

和觸發,當頁面首次加載一個hashchange。 (本次活動是不是在頁面加載自動發射,只有當URL改變—是否編程方式或通過用戶與URL擺弄)現在

$(window).trigger('hashchange'); 

打開example.com/#q=Anaheim會搜索阿納海姆。

對於獎勵積分:我假設你的頁面有一個文本框,當用戶按下輸入(和/或點擊一個按鈕)時調用一個函數。不要直接調用您的搜索功能,請使用pushState將搜索詞添加到URL。 (您的頁面不會重新加載。)由於用戶可以將頁面添加到他們的書籤中或者從瀏覽器的地址欄中複製URL,這將使其立即變得可收藏。

// on key 13/search button click: 
$.bbq.pushState({ q: $('#searchTerm').val() }); 

這就是你需要的。 hashchange處理程序從那裏啓動。

+0

我應該將pushState函數放入我的mapSearch函數中嗎? – user1517446 2012-07-18 07:11:19

+0

假設'mapSearch'是實際在Google Maps上運行查詢的函數,唯一應該調用'mapSearch'的是'hashchange'處理程序。任何會啓動搜索的東西(例如按鈕)都會使用搜索詞調用'pushState',然後激發'hashchange'。 – josh3736 2012-07-18 13:57:35

+0

我試圖在我的代碼中實現這個,但我得到這個錯誤:[link](http://stackoverflow.com/questions/11597631/deep-linking-using-bbq-plugin) – user1517446 2012-07-22 04:35:13

0

你在找什麼是產生「深層鏈接」

http://en.wikipedia.org/wiki/Deep_linking

你可以做到這一點的客戶端。

我會建議使用一個良好的JS框架,正確解釋網址併產生相同的結果。

E.g.

http://angularjs.org/

http://backbonejs.org/

我沒有與谷歌地圖足夠的經驗,但是你的JS框架應該對谷歌地圖(可能是AJAX)調用,並生成唯一的網址

這些獨特的URL可以然後用於回溯到您的應用程序。當您的框架正確解釋網址時,他們應該對GoogleMaps進行相同的API調用,並且第一次生成網址。