【问题标题】:History.go("partial URL")History.go("部分 URL")
【发布时间】:2019-06-04 14:55:33
【问题描述】:

我希望我的按钮返回到最后一个包含 /furniture/ 的 URL。

在 w3schools 文档中说:

参数可以是一个数字,它指向特定位置的 URL(-1 后退一页,1 前进一页),也可以是字符串。字符串必须是部分或完整的 URL,函数将转到与字符串匹配的第一个 URL。

https://www.w3schools.com/jsref/met_his_go.asp

因为它是 Squarespace,所以我必须使用事件侦听器向 Squarespace 按钮添加自定义功能。

<script>
  window.onload=function(){
    document.getElementsByClassName("sqs-block-button-element").addEventListener("click", goBack);

    function goBack() {
    window.history.go("https://uk5-shop.com/furniture/");
    }
  }
</script>

据我了解,这应该让我回到我上次访问的家具类别中的任何产品,例如 https://uk5-shop.com/furniture/chairhttps://uk5-shop.com/furniture/bed 。事实并非如此。

我在某处读到这可能会停止,但为什么大多数文档中都会出现这种情况?

【问题讨论】:

标签: javascript jquery html squarespace


【解决方案1】:

1.说明:

在另一个问题中回答:(https://stackoverflow.com/a/6277304/4718434)

提供 URL 作为参数是一项非标准功能,不适用于所有浏览器(以及 google chrome)。大多数浏览器只接受一个相对数字,例如1 或 -1。

但是:为什么要使用 history.go(partialUrl) ?

  • 案例 1:您只想转到用户访问历史中的某个页面,而不关心浏览器的“返回”和“前进”按钮。
  • 案例 2:您要模拟“返回”按钮。

在情况 1 中,您可以使用 cookie 来保存历史记录。

但在情况 2 中,您可以将历史记录保存在 cookie 中并模拟后退按钮,但如果用户使用来回按钮进行操作,我们将无能为力,脚本将不再准确。


2。脚本:

注意:此脚本保存临时 cookie,因此当用户关闭浏览器历史记录时将清除。如果您想要永久历史,请更改 setCookie 函数 (use this link)。

在每个页面的开头(甚至是您要使用 history.go 的页面),添加此脚本以将当前 url 保存在临时 cookie 中:

appendToCookie('history', window.location.href);

要返回与部分 url 匹配的 url,请添加以下内容(还要确保您在此页面的开头也添加了 previus 脚本(仅一次)):


//last parameter description (searchFullWebsiteHistoryAndGoForwardNotBackward) :
//1. for usage case 1 described above, set it to true
//2. for usage case 2 described above, set it to false

var wentSuccessfull = goBackToHistoryWithPartialUrl('history','/some/partial/Url',false);
if(!wentSuccessfull) console.log('the pattern doesnt exists in history!');

function goBackToHistoryWithPartialUrl(historyCookieName, partialUrl, searchFullWebsiteHistoryAndGoForwardNotBackward){
  var history = getArrayFromCookie(historyCookieName);
  var historyIndex = null;
  for(var i = history.length - 2 ; i >= 0; i--){
    if( history[i].indexOf(partialUrl) >-1){
      historyIndex = i;
      break;
    }
  }
  if(historyIndex !== null){
    if (searchFullWebsiteHistoryAndGoForwardNotBackward){
      window.location.href = history[historyIndex];
    }
    else{
      var is = [];
      for(var i = history.length - 1 ; i >= historyIndex; i--){
        is.push(i);
      }
      removeMultiFromCookie(historyCookieName,is);
      //waitForCookieToSet();
      window.history.go(historyIndex - (history.length - 1));
    }
    return true;
  }else{
    return false;
  }
}

辅助函数:

function getSeparator() {
  return '_#_SEP_#_';
}

function getArrayFromCookie(cookieName){
  var c = getCookie(cookieName);
  var a = c.split(getSeparator());
  return !c ? [] : a;
}

function appendToCookie(cookieName, value){
  var a = getArrayFromCookie(cookieName);
  a.push(value);
  setCookie(cookieName, a.join(getSeparator()));
}
function removeFromCookie(cookieName, index){
  var arr = getArrayFromCookie(cookieName);
  arr.splice(index,1);
  setCookie(cookieName, arr.join(getSeparator()));
}
function waitForCookieToSet(){
    //https://stackoverflow.com/questions/17583250/javascript-delete-cookie-before-reload-or-redirect
    var fakeAjax = new XMLHttpRequest();
    var anything = fakeAjax.responseText;
    fakeAjax.open("GET","ajax_info.txt",false);  // file doesn't actually exist
    fakeAjax.send();
}
function removeMultiFromCookie(cookieName, indices){
  var arr = getArrayFromCookie(cookieName);
  for(var i = indices.length - 1 ; i>=0 ; i-- )arr.splice(indices[i],1);
  setCookie(cookieName, arr.join(getSeparator()));
}
function setCookie(cname, cvalue) {
  document.cookie = cname + "=" + cvalue + ";path=/";
}

function getCookie(cname) {
  var name = cname + "=";
  var decodedCookie = decodeURIComponent(document.cookie);
  var ca = decodedCookie.split(';');
  for(var i = 0; i <ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

【讨论】:

  • 好吧,这应该不是问题。当前页面不包含 /furniture/ 而是它的 uk5-shop.com/stoff 。我在哪里可以找到正确的格式或工作示例,您的第一个答案实际上声称这是有效的?
  • @LuigiKraken 你的getElementByClassName 也是错误的。查看更新的答案。并请在您的 goBack 函数中输入“alert('something')”,以确保问题出在“window.history”上。另外,如果代码有问题,您应该按 f12 并在运行时查看控制台选项卡,它会显示错误是什么以及哪一行是错误的。您可以通过查看此内容进行调试(浏览器开发人员窗口 (f12),控制台选项卡)
  • 该功能确实在运行,但它总是让我返回一个页面,而不是返回到家具类别的最后一页。我没有错误消息,它的所有运行都没有出现故障,只是不是预期的结果。到目前为止,我只在一个页面中实现了它。这是链接,如果您希望它底部的按钮显示“Zurück zum Produkt”link
  • @LuigiKraken 您可能还需要案例 1,因此将 goBackToHistoryWithPartialUrl 第三个参数更改为 true。
  • 如果你想要永久(例如90天,你可以在代码中更改90)历史,将setcookie函数更改为: function setCookie(cname, cvalue) { var d = new Date(); d.setTime(d.getTime() + (90*24*60*60*1000)); var expires = "expires=" + d.toGMTString(); document.cookie = cname + "=" + cvalue + ";" + 过期 + ";path=/"; }
猜你喜欢
  • 2011-09-10
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-09-24
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多