“返回”按钮 | CSS-Tricks

Al Toman

# 2010年1月14日

1. 许多用户没有意识到浏览器的返回按钮。
2. 用户在填写表格时经常会出错。因此，他们填写表格，表格会在服务器上进行编辑检查，然后显示他们的输入并询问是否正确。如果不是，则需要返回进行更正。此时，一个居中显示的返回按钮就显得很有用。
3. 浏览器的返回按钮和脚本化的返回按钮并不总是以相同的方式运行。如果你需要特定行为，则需要创建它。

James

评论永久链接# 2014年12月2日

你其他观点可能有效，但观点1，“许多用户没有意识到浏览器的返回按钮”是完全错误的。返回按钮是普通用户工具箱中的关键工具——每个用户都知道返回按钮——这是你在可用性测试中可以假设的为数不多的东西之一。

Al Toman

# 2010年1月14日

哦。javascript:history.go(-1)及其衍生物在IE8中返回过期页面。

CatGuyTX

评论永久链接# 2014年2月5日

在我看来，IE* 应该消失或跟上步伐。我刚接触网页设计，我听到的都是IE这，IE那。我学网页设计并不是为了学习如何为IE编写代码。所有网页浏览器都应该符合标准，就这么简单。我知道这说得有点过了，但IE总是存在一些问题！
Nicklas

评论永久链接# 2014年5月23日

@CatGuyTX 你最好习惯它，因为在接下来的几年里情况不会好转。IE10+现在内置了自动更新功能，这意味着它是一个所谓的“常青”浏览器。问题是旧版本，人们无法或不愿意更新。
Dave

评论永久链接# 2014年8月15日

@CatGutTX: 目前，MSIE 11 是最符合标准的浏览器。你刚接触网页设计。我相信你检查过各种网站的CSS。你注意到所有用于圆角和阴影的 -webkit 语句了吗？这些元素是 CSS3 标准的一部分，用于这些属性的 -webkit、-moz 或 -o 前缀应该不再使用。

你可能会问，为什么设计师要使用 -webkit 前缀。很简单。每个（活动的）规范都是一个活生生的有机体，浏览器供应商不断添加新功能，然后将其提议给相应的委员会（W3C 负责 HTML 和 CSS）。在该功能成为官方规范的一部分之前，你只能使用供应商前缀（如 -webkit）来使用这些功能。

为什么 MSIE 会遇到这么多麻烦？嗯，它比 webkit 和 chrome 加起来还要古老，在 1999 年到 2004 年之间，MSIE 基本上是唯一的浏览器（直到 Firebird——后来更名为 Firefox）登场。因此，很多开发人员变得懒惰，开始使用 MSIE 的特定功能，因为该功能对网络上 95% 以上的用户可用。剩下的 5% 则使用 Opera、Konqueror（webkit 的基础，继承了 khtml 和 netscape）等浏览器。

你刚接触网页设计，所以我假设你只设计移动优先网站，但是还有很多网站针对桌面浏览器和移动浏览器使用不同的代码。在此之前几年，我们有 chtml、wap，甚至在那之前，我们还有针对桌面开发人员的不同版本（MSIE 与 Netscape）。

技术一直在不断发展，网络也是如此。但是，你不能忽略它的历史，因为这就是我们来到这里的原因。我从 1993 年开始从事网页开发，当时 Netscape 浏览器开始流行。它最初是一个商业（付费）浏览器。在 1995 年，我们开始使用 livescript（后来更名为 javascript）进行客户端开发，但是服务器端开发是使用 CGI 文件以事实上的“只写”语言 perl 完成的。

正如 Nicklas 已经指出的，MSIE 的主要问题是，并不是每个人都在运行最新版本。例如，Windows XP 用户仍然停留在 MSIE8 上。

作为一名开发人员，我对微软既爱又恨。我非常喜欢微软的开发工具，例如 Visual Studio、WPF、Sql Server、IIS。最近，我从 Chrome 切换回了 MSIE。我一直评估顶级浏览器，看看哪一个拥有最好的标准支持。目前，MSIE 是最好的，所以它现在是我的主要开发浏览器。但是，还有很多 webkit 偏爱的网站。其中相当一部分永远不会更新，而我们已经抱怨那些恼人的 webkit 网站 5 年多了。这就是科技界的工作方式。过去就是这样，未来也会继续如此。

AtifKamal

# 2011年3月3日

简单的 HREF=”javascript:history.go(-1)”>返回

Zach

评论永久链接# 2012年8月13日

这是一个非常糟糕的做法。

href 属性不应包含 JavaScript 代码。

Leonardo

# 2011年3月17日

我只想说，谢谢你的“返回”按钮/链接……它工作得很好:) 我在其中一个项目中使用了 PHP 版本。

非常感谢！

shin

# 2011年4月25日

嘿
谢谢你的 PHP 版本，它运行良好。

也许你能帮我定制一下……我需要一个条件结构来检查前一个页面的数量。如果用户查看的是第一页，我希望隐藏此按钮。有时它不是主页面。

谢谢。

Jim Jordan

评论永久链接# 2012年8月29日

<?php
if(basename($_SERVER['PHP_SELF']) == 'index.php'){
$GoBack = " ";
} else {
$GoBack = htmlspecialchars($_SERVER['HTTP_REFERER']);
}

David Mccue

# 2011年5月13日

找了很久，谢谢。在文章底部非常有用，但有没有办法将按钮改为图像。

Ben Smalley

# 2011年5月24日

David，如果你真的需要问这个问题，我不确定你是否来对了地方，但这里就是，老兄，

祝你好运！

Code Cooker

评论永久链接# 2013年11月19日

..
我刚检查了 Ben 的源代码，看看你在暗示什么。
别评判，老兄……每个人都有一个开始的地方，即使是 Netscape。哈哈！
如何使用简单的 <a href=”history.go(-1)” rel=nofollow”>

或者……你可以使用 onclick 事件

干杯！:D

jacob

# 2011年6月9日

PHP 代码有效，但存在一个问题，我需要帮助解决它。

例如
我访问页面 A
然后我访问页面 B，并点击跳转至页面 C
当我点击页面 C 上的返回按钮时，我返回到页面 B。
当我点击页面 B 上的返回按钮时，我返回到页面 C。

如何解决这个问题？

saman shaikh

评论永久链接# 2012年1月24日

你解决问题了吗？只在两个页面之间切换？
Lee

评论永久链接# 2012年2月25日

这不是它应该做的事情吗？因为你点击了 C 上的返回按钮跳转到 B。当你点击 B 上的返回按钮时，你将返回到最后查看的页面，也就是 C。
Baffour

评论永久链接# 2013年4月7日

不，不应该……你期望后退按钮能够独立于按下按钮本身时访问的页面，在历史记录中不断后退（即内置浏览器后退按钮的工作方式）。显然，由于代码的工作方式，它永远不会这样做，所以如果你想后退不止一页，那就毫无意义。

Adam Haworth

# 2011年6月30日

我非常喜欢这个按钮，它在我的网站上非常有用，感谢你抽出时间分享:)。

cyneWATCH

# 2011年7月19日

除了第一篇文章中提到的内容，还有其他原因导致它变成这样吗？

Charlie

# 2011年8月23日

我到达一个页面，上面有一个更新表单，它使用 Dreamweaver 的 PHP/MySQL 更新记录功能。我从各种来源页面来到这里，希望在点击提交按钮后返回发送我的页面。考虑到所有的 PHP 代码，这并不是一个简单的事情，不能通过更改或创建带有链接的按钮来解决。

有什么想法可以让提交按钮返回到最初发送它的页面吗？

Ken

# 2011年9月20日

我的一个新的 BibleRhymes 网站即将完成，我认为你的 JS 代码将成为其中的一部分。谢谢你！

Epi

# 2011年10月7日

哇，很棒的教程，谢谢！

Naveen P Suthar

# 2011年11月1日

PHP 技巧对我来说非常有效……谢谢！

Deepak Gupta

# 2011年11月3日

大家好,

在 A 页面上，我有一些图像链接（每个链接都指向第二个页面），以及数据表格上的某些数据。
当我转到 B 页面并点击后退按钮时，所有图像链接都没有显示。
但是在 HTML 源代码中，所有链接的代码都存在。我怀疑是 CSS 设置，但不知道哪个属性。
如果有人知道，请告知。

Jen

# 2011年11月11日

@Ben Smalley,
你是否分享了显示如何在文本位置放置图像的代码？我真的很需要这方面的帮助，我显然是 PHP 新手，而且我在网上搜索了很久都无果 :( 希望你还在这里！
非常感谢，
Jen

F4LLCON

# 2011年11月29日

非常感谢你提供这个简单但实用的脚本！我测试了 PHP 脚本，它运行得很好！

谢谢，
F4LLCON

Mike

# 2012年1月16日

很棒的代码。

谢谢！
Mike
ZeePoints.com

Keith

# 2012年3月6日

哦，老兄！！这短短的一行 js 代码简直太棒了。我已经在研究如何返回页面编辑表单条目并保留输入的信息好几天了。尝试了一些非常复杂的方法，但你那简短的一行脚本是完美的解决方案。只想说非常感谢！
我绝对给五颗星！

iamds

# 2012年4月16日

我们能否添加一个简单的条件，如果访问者来自其他地方而不是我们的网站，则隐藏脚本？

david mccue

# 2012年5月3日

谢谢，它运行得很好，但是如果访问者刚进入你的网站，是否有可能让按钮跳转到主页，或者如果访问者刚进入你的网站，是否可以移除按钮？

Robert

# 2012年5月13日

我在 PHP 中使用它，当我点击后退按钮时，它会带我到一个空白页面，你知道是什么原因吗？

Alisha Myers

# 2012年6月14日

非常感谢你提供经过清理的 PHP 版本。它修复了一个正在出现的漏洞。

BJM

# 2012年7月16日

我的网站在一个 HTML 页面上通过 CSS 结构化，如何让浏览器在不点击任何导航链接的情况下返回上一页？有什么想法吗？
谢谢！

Victoria Wagman

# 2012年8月20日

我的解决方案是，如果用户“来自我的网站”，则显示后退链接；如果用户从外部来源找到此页面，则显示链接到 /。

$findme = 'skolresurser.se';
            $pos = strpos($url, $findme);
            
            //var_dump($pos);
            if($pos === false){ ?>
                <a href="/" rel="nofollow">← Visa fler resurser</a>
            
                <a href="' + document.referrer + '" rel="nofollow">← Tillbaka</a>
            <?php }

marvin m.

# 2012年8月22日

很棒的代码，我认为每个程序员对共同目标都有不同的想法。无论如何，这是你对编写这个有用代码的想法。

amir jelodari

# 2012年9月17日

我总是使用
onClick=”hisory.back()”

ahamed

# 2013年2月1日

嗨，Coyier，你正在为初学者/中级/专家提供有用的文章，这真是太棒了，感谢你，感谢你，感谢你，感谢你……

Dan

# 2013年2月10日

我需要在这个代码段中添加一个后退按钮

    echo "We are very sorry, but there were error(s) found with the form you submitted. ";
    echo "These errors appear below.<br /><br />";
    echo $error."<br /><br />";
    echo "Please go back and fix these errors. <br /><br />";
    die();
}

我已经尝试过很多选项，但是当我把它放到网站上时，我会得到“解析错误：语法错误，在 /home/newbussc/public_html/send_form_email.php 的第 16 行出现意外的 ‘<’”。

有人能帮我一下吗？否则他们只会得到一个页面，告诉他们必须返回并使用实际的 Explorer 后退按钮。我如何在这个代码中添加一个后退按钮，而不会出现错误消息？

James White

# 2013年3月22日

我只是为了发泄一下我的沮丧才发这篇文章。我是一名网页设计师。每次！每次我创建网站时……
客户：“我如何返回上一页？”
我：*内心崩溃*

大众对浏览器一无所知……或者像他们所说的“互联网”；不会使用地址栏，也不期望使用后退/前进按钮。部分责任在于那些糟糕的网页程序员，他们破坏了后退按钮，并在这样做的时候训练了用户，让他们认为点击浏览器后退按钮是用来处理错误的。

伙计们，如果浏览器的后退按钮不能与你的网站一起使用，那么你的网站从根本上设计得很糟糕。教育你自己并修复它。

在此之前，遗憾的是，这个 CSS-TRICKS 页面是一个必要的邪恶……但我同意作者的观点。你确实需要一个非常好的理由才能使用它，对于任何从业人员来说，页面上的后退按钮意味着你的网页设计走错了方向。

Dan

评论永久链接# 2013年4月7日

不，这完全不对，因为如果数据设置为过期，就像我的表单一样，那么后退按钮将不起作用，因为页面已经过期，这就是为什么需要不同类型的按钮的原因，那就是跳转到主页。
Webman Ogbuka

评论永久链接# 2020年4月8日

当你使用 Android Web View 和 Javascript 隐藏导航按钮时，这倒是个不错的主意。

叫我 Tony

# 2013年6月6日

我发现这个方法最有效，因为它适用于所有启用了 js 的浏览器，并且对于那些禁用 js 的“聪明人”的浏览器来说，它会跳转到引用页面。

  
$back_loc="previous.php";
if(array_key_exists("HTTP_REFERER",$_SERVER)){$back_loc = $_SERVER["HTTP_REFERER"];}

href="$back_loc" onClick="history.back();return false;"

Chumonky

# 2013年6月24日

嗨，我需要使用 asp.net & c# 代码在 vs 2010 中修复这个问题。有人能告诉我如何在网页中使用这个 php 代码吗？
我是 PHP 新手。

Kabar Bola

# 2013年7月13日

我把它放在我的移动版 WordPress 主题中。使用 php 最有效。谢谢！

Mike Wax

# 2013年7月17日

我是一个 PHP 新手，所以如果这个问题很蠢，请原谅……

我试图让这个 PHP 后退按钮在网站之外工作。我正在创建一个小工具，它可以通过 PHP 提交表单。但是，如果表单中出现错误，它会重定向到一个错误页面，我需要在错误页面中添加一个后退按钮，以便返回到表单。由于这不是在网页浏览器中，因此没有后退按钮。由于我不是真正使用互联网，因此 javascript:history.go(-1); 代码也不起作用，因为小工具中没有存储历史记录。基本上，我有一个本地 HTML 文件，它链接到服务器上的 PHP 文件，我需要返回到 HTML 文件（原始页面或表单）。

<button type='button' onclick='history.go();return false;;'>Return to the Previous Page</button>

这就是我现在在我的 PHP 代码中拥有的，但我不知道如何让它正常工作。而且我不太理解上面给出的 PHP 代码。

任何帮助都将不胜感激。谢谢！

Viishnuu

# 2013年10月3日

对于 Chrome，使用以下代码

<a href="#" onclick="javascript:history.go(-1);return false;" style="text-decoration:underline;">Back</a>

只有这段代码有效……

希望对您有所帮助……
祝您编码愉快！:)

Gary

# 2014 年 2 月 20 日

对于 WordPress，我发现这个非常有用，如果用户从外部 URL 访问页面，它将转到父页面 URL。

<?php
    $parent_Url = get_permalink($post->post_parent);
    $parent_title = get_the_title($post->post_parent);
    $current_post = get_the_title();
    if ($parent_title == $current_post) { $parent_Url = '/'; };
?>
<a href="<?php echo $parent_Url ?>" class="back-btn">Go back</a>

Shubham Mathur

# 2014 年 9 月 15 日

感谢分享 JavaScript 方法，我之前使用过 PHP，但 JavaScript 版本更好 :)

jean claude

# 2015 年 1 月 19 日

你好
有人知道如何在使用 wp 制作的网站页面中插入顶部页面显示的 php 代码吗？
我的意思是，我希望我的网站访客可以从单页的套餐页面返回到他们访问的通用页面
我不知道如何处理 php 代码才能将其插入到单个套餐页面 php 代码中
谢谢！
JC

Alvaro

# 2015 年 2 月 26 日

我曾经被要求添加一个返回按钮，并且这样做了，但发现如果用户来自搜索结果，这可能会令人困惑。

Nadeem Khan

# 2015 年 4 月 17 日

谢谢，history.back(-1)
为我解决问题

Andy Gail

# 2015 年 5 月 28 日

当使用应用程序和网络时，这很棒。假设你希望用户离开应用程序并打开浏览器。在网络 UI 上添加一个后退按钮可以让用户从网络重新打开应用程序。只是我的两分钱。

Tarek

# 2015 年 12 月 29 日

我怎样才能将这个按钮对齐到右边

m2nis

# 2016 年 2 月 18 日

PHP 按钮太棒了！我只是在访客查看列表中的产品时使用后退按钮（以返回到列表）。列表没有被搜索引擎索引，以避免重复内容。PHP 按钮可以轻松地让访客从搜索引擎访问时能够保留，方法是将“返回”功能替换为类似“其他产品”的功能。它也应该可以降低跳出率。

GR

# 2016 年 4 月 5 日

history.back() 不接受参数，但很容易与 history.go(-1) 混淆

sanjeev

# 2016 年 5 月 4 日

先生，我想通过另一个 php 页面的后退按钮返回到登录后的主页

nitin maurya

# 2016 年 8 月 30 日

谢谢，
为我解决问题

Sam

# 2016 年 10 月 24 日

我在页面中有一个 image1，单击它会变为 image2。当我转到另一个页面并返回到该页面时，图像会重置为 image1。我希望即使在我返回到该页面或刷新页面后，image2 仍然保留。我是 javascript 新手，所以请帮帮我。

html 代码行

js 函数代码

Divya

# 2017 年 4 月 9 日

如果我们在表单中包含 2 个提交按钮，并且每个提交按钮都应该有单独的页面。
语法是什么？

Chris

# 2019 年 10 月 7 日

在向谷歌叔叔询问名为“back page php wordpress html5”的小村庄的去向后 10 分钟，我查看了排名前 2 的结果，感觉已经完成了。所以，我可以在我的网站上测试并使用此代码吗？

leskipedia.xyz

PS。我 60 岁了，几乎失明了。虽然我非常感谢这里的默认字体，但请允许我指出，我甚至看不到我是否成功地选中了底部的两个框。

尺寸确实很重要。

SomberNightmare

# 2019 年 12 月 22 日

它应该放在 JAVASCRIPT 中的哪个字段？

带有内联JavaScript的输入按钮

PHP

评论

发表评论 取消回复

发表评论取消回复