【问题标题】:Browser back button has no effect after using easyui-layout (jquery-easyui)使用easyui-layout(jquery-easyui)后浏览器后退按钮无效
【发布时间】:2023-03-13 20:03:01
【问题描述】:

我想了解为什么使用 jquery-easyui 库似乎会破坏浏览器的后退按钮(我不熟悉 CSS/javascript/jQuery/HTML,所以这只是一个假设)。

我从 W3C CSS How-to's 中获取了an example,它解释了如何使用 javascript 重定向到同一文档中的锚点,并且只是将现有的 <body> 内容包装在一个 easyui 布局中,该内容现在放置在该布局中在布局的中心部分。

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
    <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
    <style type="text/css">  
        html, body {
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family:verdana,helvetica,arial,sans-serif;
        }  
    </style>
</head>
<body>

<div class="easyui-layout" style="width:100%;height:100%;">
<div data-options="region:'center'" title="Foo">

<h2><a id="top">There is a link at the bottom of the page!</a></h2>

<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
<p>"Whenever you feel like criticizing any one," he told me, "just remember that all the people in this world haven't had the advantages that you've had."</p>
<p>He didn't say any more, but we've always been unusually communicative in a reserved way, and I understood that he meant a great deal more than that. In consequence, I'm inclined to reserve all judgments, a habit that has opened up many curious natures to me and also made me the victim of not a few veteran bores. The abnormal mind is quick to detect and attach itself to this quality when it appears in a normal person, and so it came about that in college I was unjustly accused of being a politician, because I was privy to the secret griefs of wild, unknown men. Most of the confidences were unsought-frequently I have feigned sleep, preoccupation, or a hostile levity when I realized by some unmistakable sign that an intimate revelation was quivering on the horizon; for the intimate revelations of young men, or at least the terms in which they express them, are usually plagiaristic and marred by obvious suppressions. Reserving judgments is a matter of infinite hope. I am still a little afraid of missing something if I forget that, as my father snobbishly suggested, and I snobbishly repeat, a sense of the fundamental decencies is parcelled out unequally at birth.</p>
<p>And, after boasting this way of my tolerance, I come to the admission that it has a limit. Conduct may be founded on the hard rock or the wet marshes, but after a certain point I don't care what it's founded on. When I came back from the East last autumn I felt that I wanted the world to be in uniform and at a sort of moral attention forever; I wanted no more riotous excursions with privileged glimpses into the human heart. Only Gatsby, the man who gives his name to this book, was exempt from my reaction-Gatsby, who represented everything for which I have an unaffected scorn. If personality is an unbroken series of successful gestures, then there was something gorgeous about him, some heightened sensitivity to the promises of life, as if he were related to one of those intricate machines that register earthquakes ten thousand miles away. This responsiveness had nothing to do with that flabby impressionability which is dignified under the name of the "creative temperament"-it was an extraordinary gift for hope, a romantic readiness such as I have never found in any other person and which it is not likely I shall ever find again. No-Gatsby turned out all right at the end; it is what preyed on Gatsby, what foul dust floated in the wake of his dreams that temporarily closed out my interest in the abortive sorrows and short-winded elations of men.</p>
<p>And, after boasting this way of my tolerance, I come to the admission that it has a limit. Conduct may be founded on the hard rock or the wet marshes, but after a certain point I don't care what it's founded on. When I came back from the East last autumn I felt that I wanted the world to be in uniform and at a sort of moral attention forever; I wanted no more riotous excursions with privileged glimpses into the human heart. Only Gatsby, the man who gives his name to this book, was exempt from my reaction-Gatsby, who represented everything for which I have an unaffected scorn. If personality is an unbroken series of successful gestures, then there was something gorgeous about him, some heightened sensitivity to the promises of life, as if he were related to one of those intricate machines that register earthquakes ten thousand miles away. This responsiveness had nothing to do with that flabby impressionability which is dignified under the name of the "creative temperament"-it was an extraordinary gift for hope, a romantic readiness such as I have never found in any other person and which it is not likely I shall ever find again. No-Gatsby turned out all right at the end; it is what preyed on Gatsby, what foul dust floated in the wake of his dreams that temporarily closed out my interest in the abortive sorrows and short-winded elations of men.</p>

<button onclick="myFunction()">Go to top</button>

</div>
</div>

<script>
function myFunction() {
  location.href = "#top";
}
</script>

</body>
</html>

您必须调整浏览器的大小,以便需要滚动按钮。虽然原始示例在单击“转到顶部”按钮后“返回”没有问题,但修改后的示例不再按预期工作。我可以看到浏览器 URL 文本字段设置为正确的值,但除此之外没有任何反应。为什么浏览器后退按钮似乎停止工作?

如果相关的话,我正在使用该库的1.5.1 版本。尝试使用最新版本的 Firefox/Chrome/Edge。

编辑:根据 cmets 中的请求,jsfiddles 演示我的问题。

First jsfiddle,没有easyui。向下滚动到“转到顶部”按钮,单击它。文本滚动到顶部。使用ALT + LEFT 使浏览器“返回”。文本滚动到按钮。

Second jsfiddle,带有easyui和小CSS。向下滚动到“转到顶部”按钮,单击它。文本滚动到顶部。使用ALT + LEFT 使浏览器“返回”。什么都没有发生。

【问题讨论】:

  • 点击Go to Top按钮后浏览器返回不起作用? - 我无法重现此问题。一切都很好。
  • 您能否提供一个可以看到这一点的最小工作示例。可能是 js fiddle 或 codepen?
  • @AlwaysHelping,我们走了。我在应该演示我之前描述的问题的问题中添加了两个 jsfiddles。
  • 所以你只是期望在 ALT + left 上它应该再次滚动回按钮?
  • @AlwaysHelping,我希望能够使用浏览器的控件返回(不管是它的 ALT+LEFT、单击浏览器工具栏中的“后退”按钮,还是以编程方式在 javascript 中)与原始示例中的方式相同。

标签: javascript html jquery-easyui


【解决方案1】:

删除“溢出:隐藏;”从文件样式的头部或将其替换为“溢出:自动;”或“溢出:滚动”。

【讨论】:

  • 这将违背使用easyui-layout的目的——它提供了自己的可滚动面板。您是说“后退按钮”需要默认滚动条处于活动状态吗?为什么“转到顶部”按钮上的重定向会起作用?
  • 对不起,我终于重现了easyUI的问题。溢出:隐藏在 w3s 的原始 html 中的“转到顶部”按钮甚至无法触及。
  • 在原始页面上按下后退按钮期间不显示任何内容似乎是正常行为。这是code。你能说出按下后退按钮时你期望在视觉上发生什么吗?
  • 似乎除了浏览器中的 url 没有任何变化是正常行为。即使没有 easyUI 的行为也是一样的。你可以在这里测试代码 (jsfiddle.net/6h5s2xub)。
  • 亚历山大,你的小提琴适合我。如果您向下滚动到您的按钮,单击“转到顶部”,文本将滚动到顶部。如果您然后返回浏览器(在我的情况下为ALT+LEFT 键绑定),文本将滚动回按钮。我编辑了我的问题以反映这一点。
猜你喜欢
  • 2013-03-02
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-08-06
  • 2011-02-17
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多