草庐IT

javascript - Chrome onpopstate/pushState 错误？

coder 2023-08-07 原文

首先，我不完全确定我正在做的或期望的是正确的。似乎没有太多关于此的文档，但我读过的内容表明这应该有效。

我在尝试使用 history.pushState 时遇到了一些问题，所以我最终制作了一个演示页面以查看出了什么问题。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" ></script>
<script>

window.onpopstate = function()
{
    var d = new Date;
    console.log(d.toString());
    console.log(document.location.href);
};

$(document).ready(function()
{

    $('#push').click(function()
    {
        var rand = Math.random();
        history.pushState( {'number':rand} , 'Test '+rand , '/test/'+rand );
        return false;
    });

});

</script>

</head>

<body>

<a href="#" id="push">New state</a>

</body>
</html>

当我单击“新状态”链接时，我希望在控制台中看到已触发 onpopstate 函数，并且我会看到一个新的 url(类似于 test/[number])。

chrome 中地址栏中的位置会更新，但 onpopstate 事件永远不会触发。 然后，当我单击浏览器中的后退按钮时，似乎正在触发多个 popstate 事件。似乎每次我使用浏览器导航按钮时，每个应该触发的 popstate 事件都会同时发生。

这有点难以解释。这是我希望在控制台中看到的内容。

Load the page. Chrome fires the initial popstate event on page load

popstate.html:132011 年 11 月 19 日星期六 16:23:48 GMT+0000(GMT 标准时间)

popstate.html:14http://example.com/popstate.html

Click the 'new state' link. The location in the address bar updates to http://example.com/test/0.06458491436205804.

2011 年 11 月 19 日星期六 16:23:53 GMT+0000(GMT 标准时间)

popstate.html:14http://example.com/test/0.06458491436205804

Click the back button in the browser. The url in the address bar returns to /popstate.html

popstate.html:132011 年 11 月 19 日星期六 16:26:27 GMT+0000(GMT 标准时间)

popstate.html:14http://example.com/popstate.html

这就是我所期待的。 这是我实际看到的...

Load the page

popstate.html:132011 年 11 月 19 日星期六 16:27:42 GMT+0000(GMT 标准时间)

popstate.html:14http://example.com/popstate.html

Click the new state link. Nothing appears in console. Address bar changes to /test/0.5458911096211523

Click back button in browser. Address changes back to /popstate.html

popstate.html:132011 年 11 月 19 日星期六 16:27:42 GMT+0000(GMT 标准时间)

popstate.html:14http://example.com/popstate.html

popstate.html:132011 年 11 月 19 日星期六 16:28:57 GMT+0000(GMT 标准时间)

popstate.html:14http://example.com/popstate.html

如您所见，它重复初始 popstate 并显示返回到/popstate.html，但它从不触发推送状态。 如果我现在在浏览器中向前按，我会得到:

popstate.html:13Sat Nov 19 2011 16:27:42 GMT+0000 (GMT Standard Time)

popstate.html:14http://example.com/popstate.html

popstate.html:13Sat Nov 19 2011 16:28:57 GMT+0000 (GMT Standard Time)

popstate.html:14http://example.com/popstate.html

popstate.html:13Sat Nov 19 2011 16:29:58 GMT+0000 (GMT Standard Time)

popstate.html:14http://example.com/test/0.5458911096211523

(他们又出现了，截图如下:http://img.ctrlv.in/4ec7da04e20d3.jpg)

不知道是我做错了，是我的期望错了，还是这其实是个bug？

提前感谢阅读所有这些内容并能为我提供一些启示的人。

最佳答案

当您转到其他页面时，Chrome 的 console.log 无法很好地处理事情。您可以确认这一点，因为它使用其他时间戳(这是不可能的)同时记录几件事。您最好使用 $("body").append 在这里登录(或附加到其他元素)。

其次，当你push一个状态时，显然它没有弹出，所以popstate事件不会被触发。如果你想在推送状态时也触发 onpopstate 处理程序，你可以像这样创建一个简单的包装器:http://jsfiddle.net/vsb23/2/ .

function load(url, state) { // logging function; normally load AJAX stuff here
    $("pre").append(new Date
                    + "\n" + url
                    + "\n" + JSON.stringify(state) // to log object as string
                    + "\n\n");
}

function pushState(data, title, url) {
    history.pushState(data, title, url);
    load(location.href, data); // call load function when pushing as well
}

window.onpopstate = function(e) {
    load(location.href, e.state);
};

$("button").click(function() {
    pushState({foo: "bar"}, "test", "/test?a=b"); // sample push
});

编辑:这已经是a bug on the Chromium bug tracker .

关于javascript - Chrome onpopstate/pushState 错误？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8195502/

javascriptonpopstatepopstatehtmlblockquotegoogle-chromepushstate

有关javascript - Chrome onpopstate/pushState 错误？的更多相关文章

  1. ruby-on-rails - Rails 常用字符串(用于通知和错误信息等) - 2

    大约一年前，我决定确保每个包含非唯一文本的Flash通知都将从模块中的方法中获取文本。我这样做的最初原因是为了避免一遍又一遍地输入相同的字符串。如果我想更改措辞，我可以在一个地方轻松完成，而且一遍又一遍地重复同一件事而出现拼写错误的可能性也会降低。我最终得到的是这样的:moduleMessagesdefformat_error_messages(errors)errors.map{|attribute,message|"Error:#{attribute.to_s.titleize}#{message}."}enddeferror_message_could_not_find(obje

  2. ruby-on-rails - 迷你测试错误 : "NameError: uninitialized constant" - 2

    我遵循MichaelHartl的“RubyonRails教程:学习Web开发”，并创建了检查用户名和电子邮件长度有效性的测试(名称最多50个字符，电子邮件最多255个字符)。test/helpers/application_helper_test.rb的内容是:require'test_helper'classApplicationHelperTest在运行bundleexecraketest时，所有测试都通过了，但我看到以下消息在最后被标记为错误:ERROR["test_full_title_helper",ApplicationHelperTest,1.820016791]test

  3. ruby-on-rails - 如何在 Rails View 上显示错误消息？ - 2

    我是rails的新手，想在form字段上应用验证。myviewsnew.html.erb.....模拟.rbclassSimulation{:in=>1..25,:message=>'Therowmustbebetween1and25'}end模拟Controller.rbclassSimulationsController我想检查模型类中row字段的整数范围，如果不在范围内则返回错误信息。我可以检查上面代码的范围，但无法返回错误消息提前致谢 最佳答案 关键是您使用的是模型表单，一种显示ActiveRecord模型实例属性的表单。c

  4. 使用 ACL 调用 upload_file 时出现 Ruby S3 "Access Denied"错误 - 2

    我正在尝试编写一个将文件上传到AWS并公开该文件的Ruby脚本。我做了以下事情:s3=Aws::S3::Resource.new(credentials:Aws::Credentials.new(KEY,SECRET),region:'us-west-2')obj=s3.bucket('stg-db').object('key')obj.upload_file(filename)这似乎工作正常，除了该文件不是公开可用的，而且我无法获得它的公共(public)URL。但是当我登录到S3时，我可以正常查看我的文件。为了使其公开可用，我将最后一行更改为obj.upload_file(file

  5. ruby-on-rails - 错误 : Error installing pg: ERROR: Failed to build gem native extension - 2

    我克隆了一个rails仓库，我现在正尝试捆绑安装背景:OSXElCapitanruby2.2.3p173(2015-08-18修订版51636)[x86_64-darwin15]rails-v在您的Gemfile中列出的或native可用的任何gem源中找不到gem'pg(>=0)ruby​​'。运行bundleinstall以安装缺少的gem。bundleinstallFetchinggemmetadatafromhttps://rubygems.org/............Fetchingversionmetadatafromhttps://rubygems.org/...Fe

  6. ruby - ＃之间？ Cooper 的 *Beginning Ruby* 中的错误或异常 - 2

    在Cooper的书BeginningRuby中，第166页有一个我无法重现的示例。classSongincludeComparableattr_accessor:lengthdef(other)@lengthother.lengthenddefinitialize(song_name,length)@song_name=song_name@length=lengthendenda=Song.new('Rockaroundtheclock',143)b=Song.new('BohemianRhapsody',544)c=Song.new('MinuteWaltz',60)a.betwee

  7. ruby-on-rails - 每次我尝试部署时，我都会得到 - (gcloud.preview.app.deploy) 错误响应 : [4] DEADLINE_EXCEEDED - 2

    我是Google云的新手，我正在尝试对其进行首次部署。我的第一个部署是RubyonRails项目。我基本上是在关注thisguideinthegoogleclouddocumentation.唯一的区别是我使用的是我自己的项目，而不是他们提供的“helloworld”项目。这是我的app.yaml文件runtime:customvm:trueentrypoint:bundleexecrackup-p8080-Eproductionconfig.ruresources:cpu:0.5memory_gb:1.3disk_size_gb:10当我转到我的项目目录并运行gcloudprevie

  8. ruby-on-rails - Rails 5 Active Record 记录无效错误 - 2

    我有两个Rails模型，即Invoice和Invoice_details。一个Invoice_details属于Invoice，一个Invoice有多个Invoice_details。我无法使用accepts_nested_attributes_forinInvoice通过Invoice模型保存Invoice_details。我收到以下错误:(0.2ms)BEGIN(0.2ms)ROLLBACKCompleted422UnprocessableEntityin25ms(ActiveRecord:4.0ms)ActiveRecord::RecordInvalid(Validationfa

  9. arrays - 这是 Ruby 中 Array.fill 方法的错误吗？ - 2

    这个问题在这里已经有了答案:Arraysmisbehaving(1个回答)关闭6年前。是否应该这样，即我误解了，还是错误？a=Array.new(3,Array.new(3))a[1].fill('g')=>[["g","g","g"],["g","g","g"],["g","g","g"]]它不应该导致:=>[[nil,nil,nil],["g","g","g"],[nil,nil,nil]]

  10. ruby-on-rails - Ruby on Rails 计数器缓存错误 - 2

    尝试在我的RoR应用程序中实现计数器缓存列时出现错误Unknownkey(s):counter_cache。我在这个问题中实现了模型关联:Modelassociationquestion这是我的迁移:classAddVideoVotesCountToVideos0Video.reset_column_informationVideo.find(:all).eachdo|p|p.update_attributes:videos_votes_count,p.video_votes.lengthendenddefself.downremove_column:videos,:video_vot

随机推荐