标签: browser-history

我正在使用 NextJS (v.13.4.15) 应用程序目录

我正在使用反应本机 webview 在移动应用程序内显示网站，因此后退按钮对于导航至关重要（我无法访问浏览器的后退按钮）

我想要类似的东西

'use client' 作为客户端组件：

    <button
      onClick={() => window.history.state && window.history.state.idx > 0 ? router.back() : router.push('/')}
    >

但是我无法让它工作，NextJS 似乎在访问 window.history 时遇到问题（或者可能不是 NextJS，这只是一个隐私问题）

即使我可以访问该窗口，该窗口对象也包含令人困惑且不一致的子属性和值，如下所示：

{
    "__NA": true,
    "tree": [
        "",
        {
            "children": [
                "courses",
                {
                    "children": [
                        [
                            "slug",
                            "hacking-success",
                            "c"
                        ],
                        {
                            "children": [
                                "__PAGE__",
                                {}
                            ]
                        }
                    ]
                }
            ]
        },
        null,
        null,
        true
    ]
}

必须有一种方法来检查 (router.back()) 是否为空或无法返回，然后检查 router.push('/) 对吗？

理想情况下：

router.back() ?? router.push('/')

或者有人可以帮助解释这个history.state.idx.tree？长度似乎与导航中历史记录项目的数量不匹配，而是与 URL 的父级/层次结构匹配

我希望 NextJS 在路由器上有一个方法，可以返回历史记录，或者在历史记录为空时提供 null/false …

是否存在用于保留dom状态的通用解决方案,以便当用户使用后退/前进返回页面时,整个页面处于他们离开的确切状态？

这篇文章询问并回答了为什么行为与不同的浏览器和不同的javascript库不一致...

Ajax,后退按钮和DOM更新

...但我很好奇是否有人对此问题有一般解决方案,不需要重新加载页面.

我试图找到一个解决方法来刷新嵌套列表与jquery Mobile 1.1版本,目前只剩下一个空白页面.

我知道一个现有的解决方案是启用pushState但是会将您发送回列表的根目录并在下一个嵌套列表视图中使用历史状态.

我在下面提出的解决方案并不漂亮,但适用于iOS和更新的Android.

$(document).bind("mobileinit", function(){

 var urlEx = '#&ui-page=5-0';  //ending of nested list url

 if (window.location.href.indexOf(urlEx) != -1){

  history.replaceState("", "0", "index.php");
   setTimeout("window.location.href='https://FULLURL#/FULLURL&ui-page=5-0'",100);
 }

 window.history.pushState("", "0", "index.php"); 

});

我意识到每个浏览器都不支持pushState和replaceState,我可以尝试使用:

window.location.href = window.location.href.substring(0,window.location.href.indexOf('#'));

相反,但它变得更加用户体验.

我希望有人可以更好地了解可以做得更好或者如何更好/更可靠地完成任务.

下面的代码效果很好.这是我的问题:窗口网址重定向,但原始网址未记录在我的浏览器历史记录中.

例如,如果我访问"http://example.com/page1",浏览器就会重定向到"http://example.com/test".但是,我需要访问的原始网址("http://example.com/page1")显示在我的浏览器历史记录中,以便我可以在其他功能中调用它.

在重定向之前,是否有访问原始网址以登录浏览器的历史记录？

<!-- script to enable age verification cookies and ensure people have age checked -->
<script type="text/javascript">
    $(document).ready(function(){
       if (window.location =="http://example.com/home") {//do nothing
       } else {
           window.location = "http://example.com/test";
       }
    });
</script>

我有一个网站作为门户网站类型的应用程序的登陆和信息页面.

我需要链接到门户网站来引发一个动画,它可以很好地过渡到门户视图(导航滑出,新的导航幻灯片,各种小部件淡出,新的淡入淡出等).

但是,我还需要网址www.mydomain.com来portal.mydomain.com.

我愿意去任何长度,两个动画加载门户网站和网址是一个子域名.

据我所知,这样做会违反安全策略而不被允许,但如果要重新加载,则无法实现向门户的流畅过渡.

有什么可以做的吗？也许是在两个域之间建立明确信任的某种方式.

我有一个Backbone应用程序.我正在使用Backbone.history来启用后退按钮.我们有一个页面(设置),可以自动加载需要用户输入的弹出窗口.如果用户选择取消,我想返回上一页.我可以使用window.history.back()来做到这一点.

问题是,如果用户通过在浏览器中输入网址直接从其他网址(如google)转到该网页(应用#设置),我想将用户重定向到主页(app /)而不是返回去谷歌.

我无法找到任何方法来做到这一点.Backbone.history看起来像是从浏览器的后退按钮存储信息,因此即使它们刚刚到达应用程序,它也有历史记录.我也找不到查看上一个网址的方法.

这可能吗？

以下代码应该引发警报"1",但不执行任何操作.

window.onpopstate = function(event) { alert(event.state.a) }
history.pushState({a: 1})
history.back()

小提琴:http://jsfiddle.net/WNurW/2/

有任何想法吗？

我使用此方法导航到url,触发事件而不是将url推送到浏览器历史记录.但是Backbone.history.navigate(url,{trigger:true, replace: true})从历史中替换以前的URL.示例:浏览器hystory

之前

localhost:port/url

Backbone.history.navigate(url + '/list',{ trigger:true, replace: true })

预期:路由触发事件url + '/list'和浏览器历史记录localhost:port/url 实际上:触发事件但浏览器历史记录localhost:port/#url/list.以前的网址被替换

我有一个包含一些选择字段的页面.一旦用户更改了选择字段的值.使用所有选择字段的值作为状态对象创建新的历史对象:

$(".chosen-select-field").chosen().change(function() {
    $(".chosen-select-field").each( function ( index ) {
        parameterNames[index].value = $( this ).val();
    });
    history.pushState(parameterNames, '', newUrl);
});

parameterNames是一个包含键和值的对象数组,例如

parameterNames.push({key:"name", value:"foobar"});

当用户单击浏览器中的后退或前进按钮时,以下代码将恢复状态.它工作但行为意外.

例如,我更改了三个选择字段(创建三个历史记录条目).然后我回去 执行restoreState,相应地更改一个选择字段.但是浏览器本身仍然处于历史中的相同位置(无法前进,仍然有相同数量的反向历史条目).

然后我再次点击后退按钮.这次state-object与我点击的列表时间相同.浏览器会移回历史记录中的一个条目.

第三次单击后退按钮时,下一个选择字段已更改,但浏览器再次保持该状态,除非我第四次单击.

谁能解释我做错了什么？

var restoreState = function(event) {
    event = event.originalEvent;
    parameterNames = event.state;
    $(".chosen-select-field").each( function ( index ) {
        if ($( this ).val() != parameterNames[index].value){
            $( this ).val(parameterNames[index].value).change();
            $( this ).trigger('chosen:updated');
        }
    });
};

// Bind history events
$(window).bind("popstate",restoreState);

我们有一个客户端在我们的应用程序中iFraming到他们的网站.他们不希望我们的应用程序中的路由器导航影响他们自己的站点的后退按钮导航.

我们尝试了几种方法,包括使用post消息尝试让iFrame在触发history.back()时与父窗口进行通信.

我的问题是,在使用Angular 2的路由器时,是否有任何简单的方法可以不影响浏览器的历史记录.据我所知,我在Angular 2的高级路由器文档中找不到任何内容:https://angular.io/docs/ts/latest/guide/router.html