如何製作HTML反向鏈接？

190

創建鏈接到上一個網頁的<a>標記的最簡單方法是什麼？基本上是一個模擬的後退按鈕，但是一個實際的超鏈接。請僅使用客戶端技術。如何製作HTML反向鏈接？

編輯
尋找具有顯示網頁的URL的你即將點擊徘徊的時候，像一個正常的，靜態的超鏈接上的利益的解決方案。我不希望用戶在超鏈接上懸停時查看history.go(-1)。最好我到目前爲止發現的是：

<script> 
 
    document.write('<a href="' + document.referrer + '">Go Back</a>'); 
 
</script>

是document.referrer可靠嗎？跨瀏覽器安全？我很樂意接受更好的答案。

來源

2012-01-11 paislee

JavaScript是一種客戶端技術，某些客戶端（比如我）只是選擇將其禁用（默認）。這就是客戶的力量！：D但是，沒有辦法單獨使用HTML來確定上一頁是什麼。 – animuson 2012-01-11 05:15:51

該解決方案具有顯示的好處懸停時鏈接頁面的網址，與大多數瀏覽器默認設置一樣，而不是history.go(-1)或類似網址：

<script> 
    document.write('<a href="' + document.referrer + '">Go Back</a>'); 
</script>

來源

2012-01-11 06:27:55 paislee

這也有利於覆蓋鏈接上打開帶有'target =「_ blank」'屬性的引用頁面的情況，其中'history.go（-1）'沒有。 – 2012-12-05 03:52:00

該解決方案丟失＃後的鏈接部分，'javascript：history.back（）'正常工作。 – Liviu 2013-06-18 21:32:36

+11

該解決方案的缺點是您無法返回多個頁面。例;導航到頁面a，b，c，d - 反覆按c，d，c，d，c，d。將它與.history進行比較。back（）a，b，c，d反覆按下返回按鈕d，c，b，a – orangesherbert 2014-07-07 14:50:46

你可以嘗試的JavaScript

<A HREF="javascript:history.go(-1)">

參考JavaScript Back Button

編輯

顯示的網址是指http://www.javascriptkit.com/javatutors/crossmenu2.shtml

和的onmouseover發送元件本身遵循

function showtext(thetext) { 
 
    if (!document.getElementById) 
 
    return 
 
    textcontainerobj = document.getElementById("tabledescription") 
 
    browserdetect = textcontainerobj.filters ? "ie" : typeof textcontainerobj.style.MozOpacity == "string" ? "mozilla" : "" 
 
    instantset(baseopacity) 
 
    document.getElementById("tabledescription").innerHTML = thetext.href 
 
    highlighting = setInterval("gradualfade(textcontainerobj)", 50) 
 
}

<a href="http://www.javascriptkit.com" onMouseover="showtext(this)" onMouseout="hidetext()">JavaScript Kit</a>

檢查jsfiddle

來源

2012-01-11 05:15:12

這不是''標籤。 – paislee 2012-01-11 05:15:52

你能解釋一下最後的編輯嗎？我只想要一個正常的鏈接，就像它在大多數瀏覽器的底部顯示的一樣。 – paislee 2012-01-11 06:25:22

因爲所有的瀏覽器都顯示爲你不需要做任何事情，但是如果你想在你自己的div中顯示它，你可以在頁面的任何位置指定div'tabledescription'來顯示鼠標懸停在標籤上的鏈接 – 2012-01-11 06:31:16

最簡單的方法是使用history.go(-1);

試試這個：

<a href="#" onclick="history.go(-1)">Go Back</a>

來源

2012-01-11 05:15:50 apiguy

試試這個

<a href="javascript:history.go(-1)"> Go Back </a>

來源

2012-01-11 05:17:59 mack

的後部鏈接是向後移動瀏覽器的一個頁面，如果用戶點擊了在大多數瀏覽器提供的後退按鈕的鏈接。反向鏈接使用JavaScript。如果瀏覽器支持JavaScript（它支持JavaScript），並且它支持後鏈接所需的window.history對象，則它將瀏覽器移回一頁。

簡單的方式是

<a href="#" onClick="history.go(-1)">Go Back</a>

OR：

function goBack() { 
 
    window.history.back() 
 
}

<a href="#" onclick="goBack()" />Go Back</a>

一般來說反向鏈接是沒有必要的......後退按鈕已經足夠相當不錯，而且通常你也可以簡單地鏈接到您網站中的上一頁。但是，有時您可能想要提供一個鏈接返回到幾個「之前」頁面之一，這就是後端鏈接派上用場的地方。所以，我是指你下面的教程，如果你想在更先進的方式來做到：

http://www.htmlcodetutorial.com/linking/linking_famsupp_108.html

來源

2012-01-11 05:18:42

與最受投票的解決方案不同，這保持了用戶擁有的滾動位置。 – Ketri 2013-09-03 20:11:22

@Ketri你能否提供對該聲明的支持？他們應該是相同的：https：//www.w3schools.com/jsref/met_his_back.asp – FarO 2017-10-06 09:47:02

361

而另一種方式：

<a href="javascript:history.back()">Go Back</a>

來源

2012-01-11 05:19:15 Bajrang

併爲一個按鈕：'' – Leo 2016-08-19 13:55:20

這種方法的缺點是標準的瀏覽器功能，如「懸停看到URL」和右鍵單擊 - >複製鏈接將被打破。 – 2017-09-11 19:38:03

您還可以使用history.back()一起document.write()顯示的鏈接，只有當真正有地方可去回：

<script> 
    if (history.length > 1) { 
    document.write('<a href="javascript:history.back()">Go back</a>'); 
    } 
</script>

來源

2017-02-10 11:45:50

'document.write'覆蓋了頁面上的所有內容，爲什麼你會使用它？ – jpaugh 2017-06-13 22:03:01

在頁面仍在加載時，您必須執行此腳本。 – 2017-06-14 10:04:51

<a href="#" onclick="history.back();">Back</a>

來源

2017-09-07 12:16:58

該解決方案爲您提供了兩全其美的

用戶可以將鼠標懸停在鏈接上查看網址
用戶不會最終損壞back-stack

更多詳情請參閱下面的代碼註釋。

var element = document.getElementById('back-link'); 
 

 
// Provide a standard href to facilitate standard browser features such as 
 
// - Hover to see link 
 
// - Right click and copy link 
 
// - Right click and open in new tab 
 
element.setAttribute('href', document.referrer); 
 

 
// We can't let the browser use the above href for navigation. If it does, 
 
// the browser will think that it is a regular link, and place the current 
 
// page on the browser history, so that if the user clicks "back" again, 
 
// it'll actually return to this page. We need to perform a native back to 
 
// integrate properly into the browser's history behavior 
 
element.onclick = function() { 
 
    history.back(); 
 
}

<a id="back-link">back</a>

來源

2017-09-11 19:36:48

最簡單的方式將您的瀏覽器到前一頁。

<a href="javascript:history.back()">Back</a>

來源

2018-01-10 04:39:32

如何製作HTML反向鏈接？

回答

相關問題