fix(url-sync): handle <base> href pages

fixes #790
algolia · Mar 2, 2016 · e58aadc · e58aadc
1 parent 6dc4bb5
commit e58aadc
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 6 deletions.
diff --git a/dev/index.html b/dev/index.html
@@ -6,7 +6,8 @@
   <title>Instant search demo built with instantsearch.js</title>
   <link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap/3.3.5/css/bootstrap.min.css">
   <link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap/3.3.5/css/bootstrap-theme.min.css">
-  <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Array.from"></script>
+  <!-- Array.from needed by dev env -->
+  <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=default,Array.from"></script>
   <!-- <link rel="stylesheet" href="./debug.css"> -->
   <link rel="stylesheet" href="./instantsearch.css">
   <link rel="stylesheet" href="./style.css">

diff --git a/src/lib/url-sync.js b/src/lib/url-sync.js
@@ -36,13 +36,13 @@ let hashUrlUtils = {
     window.addEventListener('hashchange', cb);
   },
   pushState: function(qs) {
-    window.location.assign(this.createURL(qs));
+    window.location.assign(getFullURL(this.createURL(qs)));
   },
   replaceState: function(qs) {
-    window.location.replace(this.createURL(qs));
+    window.location.replace(getFullURL(this.createURL(qs)));
   },
   createURL: function(qs) {
-    return document.location.search + this.character + qs;
+    return window.location.search + this.character + qs;
   },
   readUrl: function() {
     return window.location.hash.slice(1);
@@ -59,10 +59,10 @@ let modernUrlUtils = {
     window.addEventListener('popstate', cb);
   },
   pushState: function(qs) {
-    window.history.pushState(null, '', this.createURL(qs));
+    window.history.pushState(null, '', getFullURL(this.createURL(qs)));
   },
   replaceState: function(qs) {
-    window.history.replaceState(null, '', this.createURL(qs));
+    window.history.replaceState(null, '', getFullURL(this.createURL(qs)));
   },
   createURL: function(qs) {
     return this.character + qs + document.location.hash;
@@ -72,6 +72,18 @@ let modernUrlUtils = {
   }
 };
 
+// we always push the full url to the url bar. Not a relative one.
+// So that we handle cases like using a <base href>, see
+// https://github.com/algolia/instantsearch.js/issues/790 for the original issue
+function getFullURL(relative) {
+  return getLocationOrigin() + window.location.pathname + relative;
+}
+
+// IE <= 11 has no location.origin
+function getLocationOrigin() {
+  return `${window.location.protocol}//${window.location.hostname}${window.location.port ? ':' + window.location.port : ''}`;
+}
+
 /**
  * Instanciate a url sync widget. This widget let you synchronize the search
  * parameters with the URL. It can operate with legacy API and hash or it can use