Chrome 为什么导航到另一个页面被取消,用户被重定向到他们所在的同一页面?

rsl1atfo  于 2023-05-04  发布在  Go
关注(0)|答案(4)|浏览(147)

bounty还有4天到期。回答此问题可获得+400声望奖励。fahadash想要引起更多关注这个问题:赏金将被授予一个获胜的线索,导致有助于在正确的方向找到根本原因。

我有一个客户,当她试图浏览我的Web应用程序时,她的计算机上出现了一个奇怪的问题(她的Chrome版本是100.x):
应用程序中有一个页面,其中显示订单列表和每个订单的链接,以返回到服务器端导致重定向的同一页面,将用户带到订单详细信息页面。单击超链接时,超链接将运行如下所示的javascript函数。

function NavigateToOrder(orderId) {
     // Some input fields changed here
     document.forms[0].submit(); // there is only one form in the entire dom.
    }

它在任何地方都能正常工作,但在她的电脑上,当她点击一个订单时,她确实看到页面刷新,但她在同一个订单列表页面上结束。
我让她去Chrome开发工具,这是我注意到的或我们尝试过的。
network选项卡确实显示了.submit()调用的POST请求,但它立即以红色显示为cancelled,并且之后它对现有URL执行了另一个POST,因此她最终停留在订单列表页面上。
我认为有一些onsubmit()逻辑在做这件事,所以我让她转到Elements选项卡,点击Form元素,在Event Listeners中,我让她删除唯一存在的侦听器。她再次点击链接,同样的事情发生了。
我确实有新的遗迹浏览器仪器脚本的可观察性,我让她搜索那些Elements列表中的<script>标记,并让她删除那些,仍然,POST被取消。
我在一个Chrome Incognito窗口中完成了所有这些操作,禁用了所有扩展,只启用了Google Docs Offline扩展。
还有其他的我应该检查的东西吗?她很贴心,给了我这么多时间来经历这个痛苦的调试过程。我应该提到的是,出于某种原因,她不能让我控制她的共享屏幕,所以我口述给她。
编辑1:Chrome的Network标签页显示所有那些POST请求与Initiator为“其他”,而不是在Sources的实际位置。

fjaof16o

fjaof16o1#

有人不得不前往该网站,坐在终端用户旁边,才发现他们正在双击超链接,第二次单击执行Cancelled部分,由于某种原因,我们的脚本在双击时不导航用户,它只是重定向到同一页面。
我还是想奖励赏金点数。请发表你的建议,我怎么能抓住这一点,通过访问他们的屏幕在缩放演示文稿,什么在开发工具可能会导致我认为这个方向,这是不是一个正常的点击?

6mzjoqzu

6mzjoqzu2#

从chrome103,你可以在devtools的记录器面板中捕捉点击事件:
https://developer.chrome.com/blog/new-in-devtools-103/
例如,在SO按钮上双击:

保存后,您可以重播捕获的操作并分析发生了什么,还可以查看每个操作的源代码:

hxzsmxv2

hxzsmxv23#

在chrome devtools上,你有另一种方法来检查元素上的事件:
在你的html用户界面中,右键点击你想要监视的元素,然后从上下文菜单中选择“inspect”:

执行此操作,您将打开devtools的Element选项卡。
然后点击控制台选项卡,并在控制台提示符下键入以下内容:

monitorEvents($0)

和命中返回。
从此,控制台将监视先前选择的元素上的所有事件:

您可以通过在控制台提示符处键入以下内容来停止monitor元素:

unmonitorEvents($0)
1dkrff03

1dkrff034#

给予你第三种解决方案!
在devtools中,转到“source”选项卡。单击并展开右侧的“事件侦听器断点”。然后展开鼠标并选中“双击”。
从这一点上,每次双击页面,调试器将暂停,就像你把一个beakpoint。所以你知道什么时候双击完成。

相关问题