web-dev-qa-db-ja.com

HTMLアンカー（＃）を使用してページを強制的に再読み込みする-HTMLおよびJS

/example#myanchor1というページにいるとしましょう。ここで、myanchorはページ内のアンカーです。 /example#myanchor2にリンクしたいのですが、そうしている間にページを強制的に再読み込みします。

その理由は、ページのロード時にjsを実行してURLからアンカーを検出するためです。ただし、ここでの問題（通常予想される動作）は、ブラウザーがページをリロードせずにページ上の特定のアンカーに送信するだけであるということです。

どうすればそうしますか？ JSは大丈夫です。

javascriptjqueryhtmlanchor
32
Yuval Karmi

リロードを回避するためにURLのアンカーを監視することをお勧めします。これが、制御フローにアンカーを使用するポイントです。しかし、まだここに行きます。単純なアンカーリンクを使用してリロードを強制する最も簡単な方法は、

<a href="?dummy=$random#myanchor2"></a>

$randomの代わりに乱数を挿入します（「ダミー」がサーバー側と解釈されないと仮定します）。アンカーを設定した後にページをリロードする方法があると確信していますが、アンカーが設定されていることに反応して、その時点で必要なことを行うよりもおそらく難しいでしょう。

この場合も、この方法でページをリロードすると、代わりにクエリパラメータとしてmyanchor2を配置し、スタッフサーバー側をレンダリングできます。

編集
すべての状況で上記のリンクがリロードされることに注意してください。ページにまだない場合にのみリロードする必要がある場合は、ダミー変数をより予測可能にする必要があります。

<a href="?dummy=myanchor2#myanchor2"></a>

ただし、ハッシュを監視することをお勧めします。

33
falstro

そのようなシンプルな

<a href="#hardcore" onclick="location.reload()">#hardcore</a>

例

21
Qwerty

とにかくページを常にリロードし続ける場合、クライアントサイドJSを使用する意味は何ですか？ページがリロードされていない場合でも、変更のハッシュを監視することをお勧めします。

このページ には、ハッシュモニターライブラリとjQueryプラグインがあります。

本当にページをリロードしたい場合は、ハッシュの代わりにクエリ文字列（？foo）を使用してください。

4
Matti Virkkunen

別の方法として、URLを設定し、window.location.reload()を使用して強制的にリロードします。

<a href="/example#myanchor2" 
    onclick="setTimeout(location.reload.bind(location), 1)">
</a>

基本的に、setTimeoutはリロードを遅らせます。 onclickにはreturn falseがないため、hrefが実行されます。 URLはhrefによって変更され、その後のみページがリロードされます。

JQueryは不要であり、簡単です。

3
Stilltorik

まだ言及されていないもう1つのオプションは、イベントリスナーを（たとえば jQuery を使用して）関心のあるリンクにバインドし（すべてではないかもしれませんが）、リスナーを取得することです使用する関数を呼び出します。

コメントの後に編集

たとえば、次のコードをHTMLに含めることができます。

<a href="example#myanchor1" class="myHash">example1</a>
<a href="example#myanchor2" class="myHash">example2</a>
<a href="example#myanchor3" class="myHash">example3</a>

次に、次のコードを追加して、リンクをバインドして応答します。

<script type="text/javascript">
    $('a.myHash').click(function(e) {
        e.preventDefault(); // Prevent the browser from handling the link normally, this stops the page from jumping around. Remove this line if you do want it to jump to the anchor as normal.
        var linkHref = $(this).attr('href'); // Grab the URL from the link
        if (linkHref.indexOf("#") != -1) { // Check that there's a # character
            var hash = linkHref.substr(linkHref.indexOf("#") + 1); // Assign the hash to a variable (it will contain "myanchor1" etc
            myFunctionThatDoesStuffWithTheHash(hash); // Call whatever javascript you use when the page loads and pass the hash to it
            alert(hash); // Just for fun.
        }
    });
</script>

JQuery class selector を使用して「監視」するリンクを選択していることに注意してください。ただし、 selector を使用できます。

既存のコードがどのように機能するかに応じて、どのように/何を渡すかを変更する必要があります（おそらく、新しいハッシュを含む完全なURLを構築し、それを渡す必要があります-例えば。 http：// www.example.com/example#myanchor1 ）、または既存のコードを変更して、新しいコードから渡すものを受け入れます。

3
Blair McMillan

別の答え に触発された私のお気に入りのソリューションは：

<a href="#myanchor2" onclick="location.hash='myanchor2'; location.reload();">myanchor2</a>

hrefリンクは追跡されないため、独自の設定を使用できます。例：""または"#"。

私は受け入れられた答えが好きですが、外国のパラメータを導入しないので、私はこれがよりエレガントであると思います。そして、@ Qwertyと@Stilltorikの両方の答えが原因で、リロード後にハッシュが消えていました。

2
Dário

ここに私がやったようなものがあります（「anc」は他には何も使用されていません）：

<a href="/example?anc=myanchor2"></a>

そしてオンロード：

window.onload = function() {
    var hash = document.location.hash.substring(1);
    if (hash.length == 0) {
        var anc = getURLParameter("anc");
        if (anc != null) {
            hash = document.location.hash = anc;
        }
    }
}

GetURLParameter関数は here からのものです

2
bourne2program

簡単な疑問符を追加して、これを試してください。

<a href="?#anchor2">Going to Anchor2 with Refresh</a>

0
Abid Ali

別の回答で示唆されているように、ハッシュの監視もオプションです。私はこのように解決することになったので、最小限のコード変更が必要でした。元の質問をした場合、このオプションが完全に説明されていれば良かったと思います。

追加の利点は、どちらの状況（ハッシュの変更またはページのロード）でも追加のコードを使用できることです。また、カスタムハッシュを使用してハッシュ変更コードを手動で呼び出すこともできます。 jQueryを使用したのは、ハッシュ変更の検出が簡単になるためです。

行くぞ！

ハッシュが検出されたときに起動するすべてのコードを別の独立した関数に移動します。

function openHash(hash) {

  // hashy code goes here

  return false; // optional: prevents triggering href for onclick calls
}

次に、両方のシナリオのハッシュを次のように検出します。

// page load
$(function () {
  if(typeof location.hash != typeof undefined) {
    // here you can add additional code to trigger only on page load
    openHash(location.hash);
  }
});

// hash change
$(window).on('hashchange', function() {
  // here you can add additional code to trigger only on hash change
  openHash(location.hash);
});

また、次のように手動でコードを呼び出すこともできます

<a href="#" onclick="openHash('super-custom-hash')">Magic</a>

これが誰にも役立つことを願っています！

0
eleven59

このヘルプを試してみてください

<a onclick="location.href='link.html'">click me</a>

代わりにアンカータグで

<a href="link.html">click me </a>

0
prashant kute