web-dev-qa-db-ja.com

HTMLのバックリンクを作成する方法？

前のWebページにリンクする<a>タグを作成するための最も簡単な方法は何ですか？基本的にはシミュレートされた戻るボタンですが、実際のハイパーリンクです。クライアント側のテクノロジのみをお願いします。

編集
通常の静的ハイパーリンクのように、ホバー時にクリックしようとしているページのURLを表示するという利点がある解決策を探してください。ハイパーリンクの上にマウスを置いたときにhistory.go(-1)を見ないようにします。私がこれまでに見つけた最高のものは：

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

document.referrerは信頼性がありますか？クロスブラウザセーフ？私はより良い答えを受け入れて幸せになるでしょう。

javascripthtmlhyperlink
230
paislee

このソリューションには、ほとんどのブラウザがデフォルトでhistory.go(-1)などではなく、ホバーにリンク先ページのURLを表示するという利点があります。

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

そしてもう一つの方法：

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

最も簡単な方法はhistory.go(-1);を使うことです

これを試して：

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

あなたはJavaScriptを試すことができます

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

参照 JavaScriptの戻るボタン

_編集_

参照のURLを表示するには 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>

check jsfiddle

33
Hemant Metalia

このソリューションはあなたに両方の長所を提供します

  • ユーザーはURLを見るためにリンク上にマウスを持って行きます
  • ユーザーが破損したバックスタックに陥ることはありません

以下のコードコメントの詳細。

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();
  return false;
}
<a id="back-link">back</a>
18
Vivek Maharajh

バックリンクは、ユーザーがほとんどのブラウザで使用可能な[戻る]ボタンをクリックした場合と同様に、ブラウザを1ページ後方に移動させるリンクです。バックリンクはJavaScriptを使用しています。お使いのブラウザがJavaScriptをサポートしている場合（またはサポートしている場合）、バックリンクに必要なwindow.historyオブジェクトをサポートしている場合は、ブラウザを1ページ戻します。

簡単な方法は

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

または：

function goBack() {
  window.history.back()
}
<a href="#" onclick="goBack()" />Go Back</a>

一般的に言えば、バックリンクは必要ありません…バックボタンは通常は非常にうまく機能します。通常は、サイトの前のページにリンクすることもできます。ただし、いくつかの「前の」ページの1つにリンクを戻したい場合があるので、ここでバックリンクを使用すると便利です。あなたがより高度な方法でやりたいのであれば私はあなたがチュートリアルの下にあなたを参照してください：

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

18
user319198

ブラウザを前のページにリンクする最も簡単な方法。

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

アンカータグ<a>を使用して前のページに戻るには、以下の2つの作業方法があります。そのうち1st oneは高速で、1つの大きな利点を持ちます。前のページへ.

私は両方の方法を試しました。

1）

<a href="#" onclick="location.href = document.referrer; return false;">Go Back</a>

上記の方法（1）は、リンクをクリックし、現在のブラウザウィンドウで新しいタブで開いたリンクをクリックした場合に最適です。

2）

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

上記の方法（2）は、リンクをクリックして現在のブラウザウィンドウで現在のタブで開いたリンクをクリックした場合にのみ有効です。

新しいタブで開いているリンクがある場合は機能しません。ここでhistory.back()はウェブブラウザの新しいタブでリンクが開かれていると機能しません。

7
Viren Panchal
<a href="javascript:history.go(-1)">Go Back</a>
7
Neha Sharma

これを試して

<a href="javascript:history.go(-1)"> Go Back </a>
7
mack
<a href="#" onclick="history.back();">Back</a>
4
Roee Gavirel

また、history.back()とdocument.write()を併用して、実際に戻る場所がある場合にのみリンクを表示することもできます。

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