如何检查用户是否可以返回浏览器历史记录

2020/11/06 13:03 · javascript ·  · 0评论

我想使用JavaScript来查看是否存在历史记录,这意味着浏览器上是否提供了后退按钮。

简短的回答:不能。

从技术上讲,有一种准确的方法可以检查属性:

history.previous

但是,它将不起作用。问题在于,在大多数浏览器中,这被认为是违反安全性的,通常只会返回undefined

history.length

是一个属性,其他人已经建议......
但是,长度不完全,因为它并不表示工作地方在历史上你。此外,它并不总是以相同的数字开头。例如,未设置为具有登录页面的浏览器从0开始,而另一个使用登录页面的浏览器从1开始。

替代文字

大多数情况下,添加的链接会调用:

history.back();

要么

 history.go(-1);

只是期望如果您不能返回,则单击链接不会执行任何操作。

还有另一种检查方法-检查引荐来源网址。第一页通常会有一个空白的引荐来源网址...

if (document.referrer == "") {
    window.close()
} else {
    history.back()
}

我的代码允许浏览器返回一页,如果失败,它将加载一个备用URL。它还可以检测标签变化。

当后退按钮不可用时,后备网址将在500毫秒后加载,因此浏览器有足够的时间加载前一页。立即加载后备网址window.history.go(-1);会导致浏览器使用后备网址,因为js脚本尚未停止。

function historyBackWFallback(fallbackUrl) {
    fallbackUrl = fallbackUrl || '/';
    var prevPage = window.location.href;

    window.history.go(-1);

    setTimeout(function(){ 
        if (window.location.href == prevPage) {
            window.location.href = fallbackUrl; 
        }
    }, 500);
}

这是我的方法。

我使用'beforeunload'事件设置了一个布尔值。然后我设置一个超时,以观察是否触发了“ beforeunload”。

var $window = $(window),
    $trigger = $('.select_your_link'),
    fallback = 'your_fallback_url';
    hasHistory = false;

$window.on('beforeunload', function(){
    hasHistory = true;
});

$trigger.on('click', function(){

    window.history.go(-1);

    setTimeout(function(){
        if (!hasHistory){
            window.location.href = fallback;
        }
    }, 200);

    return false;
});

似乎可以在主要浏览器上运行(到目前为止,已测试FF,Chrome,IE11)。

这似乎可以解决问题:

function goBackOrClose() {  

    window.history.back();
    window.close(); 

    //or if you are not interested in closing the window, do something else here
    //e.g. 
    theBrowserCantGoBack();

}

调用history.back(),然后调用window.close()。如果浏览器能够返回历史记录,则将无法进入下一条语句。如果无法返回,则将关闭窗口。

但是,请注意,如果通过键入URL到达页面,则Firefox将不允许脚本关闭窗口。

我在项目中使用了一个代码段:

function back(url) {
    if (history.length > 2) {
        // if history is not empty, go back:
        window.History.back();
    } else if (url) {
        // go to specified fallback url:
        window.History.replaceState(null, null, url);
    } else {
        // go home:
        window.History.replaceState(null, null, '/');
    }
}

仅供参考:我使用History.js来管理浏览器历史记录。


为什么要比较history.length与数字2?

因为Chrome的起始页被视为浏览器历史记录中的第一项。


history.length用户行为的可能性很小

  • 用户在浏览器中打开新的空白标签,然后运行页面。history.length = 2并且我们想back()在这种情况下禁用,因为用户将转到空白标签。
  • 用户通过单击之前某处的链接新选项卡中打开页面history.length = 1再次,我们要禁用back()方法。
  • 最后,用户在重新加载了几页之后便到达了当前页面history.length > 2现在back()可以启用了。

注意:当用户从外部网站(没有)单击链接后,当用户登陆当前页面时,我忽略了这种情况target="_blank"

注意2: document.referrer在您通过输入网址来打开网站时以及网站使用ajax加载子页面时为空,因此在第一种情况下,我不再检查此值。

请注意,window.history.length因为它还包含window.history.forward()

因此,您可能有window.history.length多个条目,但没有历史记录后退条目。这意味着如果您开火,什么也不会发生window.history.back()

您无法直接检查后退按钮是否可用。您可以查看history.length>0,但是如果当前页面之前也有页面,这将适用您只能确定在时后退按钮不可用history.length===0

如果这还不够好,那么您几乎可以做的就是打电话,history.back()并且如果此后仍然加载页面,则后退按钮不可用!当然,如果手段后退按钮可用的,你刚刚从页面导航离开。您不允许取消中的导航onunload,因此,要停止实际发生的后退,您要做的所有事情就是从中返回某些内容onbeforeunload,这将导致出现一个大的烦人提示。这不值得。

实际上,对历史做任何事情通常都是一个非常糟糕的主意。历史记录导航用于Chrome浏览器,而不适用于网页。添加“返回”链接通常会导致用户困惑,其价值不菲。

history.length是没有用的,因为它不会显示用户是否可以返回历史记录。同样,不同的浏览器使用初始值0或1-取决于浏览器。

$(window).on('beforeunload'可行的解决方案是使用事件,但是我不确定如果通过ajax加载页面并使用pushState更改窗口历史记录,它将无法正常工作。

因此,我使用了下一个解决方案:

var currentUrl = window.location.href;
window.history.back();
setTimeout(function(){
    // if location was not changed in 100 ms, then there is no history back
    if(currentUrl === window.location.href){
        // redirect to site root
        window.location.href = '/';
    }
}, 100);

这里这里的答案的基础上我认为,更结论性的答案只是检查这是否是新标签中的新页面。

如果页面的历史记录不止一个,那么我们可以返回到当前页面之前的页面。如果不是,则该选项卡是一个新打开的选项卡,我们需要创建一个新的选项卡。

不同的是,对于链接的答案,我们不检查a,referrer因为新选项卡仍将具有引荐来源网址。

if(1 < history.length) {
    history.back();
}
else {
    window.close();
}

我想出了以下方法。它利用onbeforeunload事件来检测浏览器是否开始离开页面。如果不在特定时间范围内,它将重定向到备用。

var goBack = function goBack(fallback){
    var useFallback = true;

    window.addEventListener("beforeunload", function(){
      useFallback = false;
    });

    window.history.back();

    setTimeout(function(){
        if (useFallback){ window.location.href = fallback; }
    }, 100); 
}

您可以使用调用此函数goBack("fallback.example.org")

还有另一个接近完美的解决方案,取自另一个SO答案

if( (1 < history.length) && document.referrer ) {
    history.back();
}
else {
    // If you can't go back in history, you could perhaps close the window ?
    window.close();
}

有人报告说它在使用时不起作用,target="_blank"但似乎在Chrome上对我有用。

浏览器具有前进和后退按钮。我针对这个问题提出了解决方案。但它会影响浏览器的前进操作并导致某些浏览器的错误。

它的工作原理是这样的:如果浏览器打开了一个从未打开过的新URL,history.length将增加。

所以你可以像这样更改哈希

  location.href = '#__transfer__' + new Date().getTime() 

要获得一个从未显示的网址,history.length将获得真实的长度。

  var realHistoryLength = history.length - 1

但是,它并不总是能很好地工作,而且我也不知道为什么,尤其是当url自动跳转时。

我试图找到一个解决方案,这是我能得到的最好的解决方案(但效果很好,这是我在这里找到的最简单的解决方案)。

就我而言,我想使用后退按钮返回历史记录,但是如果用户打开的第一页是我的应用程序的子页面,它将返回主页面。

解决的方法是,应用程序一加载,我就对历史状态进行了替换:

history.replaceState( {root: true}, '', window.location.pathname + window.location.hash)

这样,我只需要检查history.state.root后再返回。如果为true,我将历史记录替换为:

if(history.state && history.state.root)
    history.replaceState( {root: true}, '', '/')
else
    history.back() 
var fallbackUrl = "home.php";
if(history.back() === undefined)
    window.location.href = fallbackUrl;

'use strict';
function previousPage() {
  if (window.location.pathname.split('/').filter(({ length }) => length > 0).length > 0) {
    window.history.back();
  }
}

讲解

window.location.pathname将为您提供当前的URI。例如https://domain/question/1234/i-have-a-problem会给/question/1234/i-have-a-problem有关更多信息,请参见有关window.location的文档

接下来,对的调用split()将为我们提供该URI的所有片段。因此,如果采用以前的URI,我们将有类似的内容["", "question", "1234", "i-have-a-problem"]有关更多信息,请参见有关String.prototype.split()的文档

filter()这里的调用是过滤掉由反斜杠生成的空字符串。基本上,它将仅返回长度大于1的片段URI(非空字符串)。所以我们会有类似的东西["question", "1234", "i-have-a-question"]可以这样写:

'use strict';
window.location.pathname.split('/').filter(function(fragment) {
  return fragment.length > 0;
});

有关更多信息,请参见有关Array.prototype.filter()Destructuring分配的文档

现在,如果用户尝试在打开时返回https://domain/,我们将不会触发if语句,因此也不会触发该window.history.back()方法,因此用户将留在我们的网站中。该URL等同于其[]长度为0,并且0 > 0为false。因此,默默地失败。当然,您可以记录一些内容,或者根据需要执行其他操作。

'use strict';
function previousPage() {
  if (window.location.pathname.split('/').filter(({ length }) => length > 0).length > 0) {
    window.history.back();
  } else {
    alert('You cannot go back any further...');
  }
}

局限性

当然,如果浏览器不支持History API,则此解决方案将不起作用使用此解决方案之前,请查看文档以了解更多信息。

我不确定这是否有效,并且尚未经过完全测试,但是请尝试以下操作:

<script type="text/javascript">

    function goBack() {
        history.back();
    }

    if (history.length > 0) { //if there is a history...
        document.getElementsByTagName('button')[].onclick="goBack()"; //assign function "goBack()" to all buttons onClick
    } else {
        die();
    }
</script>

在HTML的某处:

<button value="Button1"> //These buttons have no action
<button value="Button2">

编辑:

您还可以做的是研究哪些浏览器支持back功能(我认为它们都支持),并使用在此页面上找到并进行了详细描述的标准JavaScript浏览器检测对象然后,您可以有2个不同的页面:一个用于与后退按钮兼容的“优质浏览器”页面,另一个用于指示“不良浏览器”告诉他们更新其浏览器的页面

检查是否window.history.length等于0。

本文地址:http://javascript.askforanswer.com/ruhejianchayonghushifoukeyifanhuiliulanqilishijilu.html
文章标签:
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!