質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.50%

  • JavaScript

    16444questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML5

    4025questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2074questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

URLを書き換えさせるとチカチカする

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,010

-1an.vvks-

score 61

 [√] カーソルがちらつく

やりたいこと
ページ内リンクをクリックしたときに,URLに「#s0」が付くのを消す.
(index.html#s0 → index.html という想定)

<a href="#s0" onclick="
setInterval( function(){
window.history.replaceState('','','index.html')
}, 1000);
">押しほしい</a>


単にonclick="window.history.replaceState('','','index.html');"と書くだけでは,URL書き換え結果が持続しないので,setIntervalで対応したところ,マウスカーソルがちらついてしまいます.

状況としてはcly7796.netさんのDEMOと同じ状況になっています.しかし,単に「history.replaceState('','','URL1');」と書くだけ,と言っているkipureさんのDEMOはちらつきが発生していません.

両者の違いと言えば,VanillaJSかjQueryかぐらいでしょうか?
jQueryで出来るなら,多少コードが長くなったとしてもVanillaJSでも出来るはずだと思うのですが...

現状

こうなってました(setInterval無し版)

画面左中央のボタンが本件の<a>です。
ボタンを押した瞬間とhistory.replaceState終了後にそれぞれ現在のURLをalertで出力させています。
1回目のalertで、#付きのURLが表示され、2回目のalertで、#無しのURLが表示されますが、alertを閉じると(処理が終わると)URLが戻ってしまいます。

そして、morisobaさんの提案通りsetTimeoutを指定したものがこちらです。
見事にうまくいきました!

ということで

そもそも何故、history.replaceStateを単体で書くと処理が持続しないのか、kipureさんのDEMOhistory.replaceStateを単体で書いていました。
jQueryを使っていると、勝手にsetTimeoutが設定されるのでしょうか?

kipreさんのソース
kipreさんのdemo
あと、いちいちfunction(){}と書かなければならないのはなぜでしょうか

この辺りについて教えてもらえるとうれしいです。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 4

+2

setInterval で1秒おきに実行しているからちらつくのでは?
ちらつくかどうかはお使いのブラウザにも依ると思いますが。

 とりあえずの対処法

実行するのは一度でいいので、setTimeout にします。
待つのは0秒にします。

<a href="#s0" onclick="
setTimeout( function(){
window.history.replaceState('','','index.html')
}, 0);
">押し<strong>て</strong>ほしい</a>

 本質的な対処

ページ内のスクロール制御をしたい、かつ URL は弄りたくないのであれば、window.scrollToを使いましょう。
そうすれば <a> タグ使わないでいいですね。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/04/24 17:28

    setTimeoutというのがあるのですね。家に帰ったら試してみます。
    ちなみに、aタグを使っている件ですが、他のページのリンクから任意のウインドウへ直接飛べるようにしているので、今はとりあえずaタグはそのままにしておこうと思います。
    ウィンドウという言い方をしましたが、細かい部分が伝わりづらいと思うので、作りかけのやつですが、これも家に帰ってから、サーバーへアップロードしてリンクを張ろうと思います。

    キャンセル

checkベストアンサー

+1

追記分に関する回答です。

なぜ setInterval や setTimeout を使わないと URL 欄が変化しないか、ブラウザが行っているその背後の仕組を説明します。

<a href="#s0" onclick="
window.history.replaceState('','','index.html')
">押してほしい</a>

ここで”押してほしい”をクリックすると何がおこるかというと、

  1. クリックされたので、onclickを実行する
  2. javascript が URL 欄を書き換える
  3. <a> によるページ遷移が発生する
  4. ブラウザが URL に "#s0" を付け加える

以上となり、js が先に走ってしまうので結果的に URL 欄は質問者さんの意図と異なる結果となります。

ここで処理の順番をかえるために、タイマーを利用しています。これはブラウザの処理順を入れ替えるためにちょくちょく使うテクニックです。

<a href="#s0" onclick="
setTimeout( function(){
window.history.replaceState('','','index.html')
}, 0);
">押してほしい</a>

このときの処理順はこうなります。

  1. クリックされたので、onclickを実行する
  2. setTimeout なので、即時実行せずに、次のイベントキューに中身を積んでおく
  3. <a> によるページ遷移が発生する
  4. ブラウザが URL に "#s0" を付け加える
  5. ブラウザは即時実行する処理が終わったので、イベントキューの中を見に行く
  6. replaceState が発動して URL を書き換える

仕組みとしては以上です。

あと、これは蛇足なのですが、 URL のハッシュをわざわざ取り除く意図がよくわかりません。
このような標準的な挙動はそのままにして置くほうが概ね良い結果になります。

別のページからそのアンカーを参照しているのであれば、そのまま表示しておいていいんじゃないですかねぇ……。
アクセサビリティにも影響しそうですし。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/04/28 14:34

    なるほどお!
    alertだけ見てるとうまくいってそうに見えたのですが、実際には少しタイミングが違かったのですね。

    アクセシビリティに影響しそうとのことなので、今回は実装を外そうと思いますが、メモ帳にコピペしてとっておくことにします。

    ありがとうございました!

    キャンセル

+1

両者の違いと言えば,VanillaJSかjQueryかぐらいでしょうか?

いや、setIntervalを使ってることが違うと思いますが……
1秒ごとにURLを更新する必要はないように感じますが、その辺の処理はどうしても必要なんですか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/04/24 17:31

    setIntervalは確かにそうですね。ただ質問本文にも書きましたが、自分のサイトだとsetIntervalなしでは、history.replaceStateの効果が持続しないようです。
    実物を見せたほうが現状がわかりやすいと思うので、家に帰ってからソースをアップするつもりです。

    キャンセル

0

そのファイル自体のAタグは何の目的に使用するのですか?
ただ単にonClickイベントを取るだけならhref="javascript:void(0)"でいけますよ

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/04/15 23:31

    #s0:target{
    /*css*/
    }
    としているので、href=#s0と記述しています。

    キャンセル

  • 2017/04/15 23:34

    #s0がターゲットされた際に、間接セレクタを使って、他の要素のスタイルも変えるのですが、ページ遷移はしていないので、#s0を消したい、ということです。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.50%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 受付中

    JavaScriptのImageオブジェクトの画像サイズ取得

    JavaScript(jQuery)で下記のようにImageオブジェクトを生成し、画像を読み込んだあとに、縦横サイズを取得し、その値を次の処理で使いたいのですが、画像の読込は非同期

  • 解決済

    jQuery表示のリンクの戻り先

    jQueryを用する上では基本的な事かもしれませんが、質問させていただきます。 あるサイト、はっきり言ってしまうと、ヤフーの「トリプル」というサービスなのですが、jQuery

  • 解決済

    Jquery部分作動せず 信号制作

    信号制作で クリック、青三秒点灯、青三秒点滅、からの黄色二秒点灯、最後に赤五秒点灯させたいのですがJQueryで書いた部分、青点滅終了と黄色点灯開始が反応しません。なぜでしょうか?

  • 解決済

  • 解決済

    Slickで画像スライドの実装を行う際の対象について

    前提・実現したいこと 現在、Slickを使って画像スライドの実装を行おうとしています。 その際に、画像を指定するタグをjQueryのappendで動的に生成しているのですが、そ

  • 解決済

    jQuery ダブルクリックした行の値を取得

    お世話になります。 表題の通りですが、ダブルクリックした行の値を取得したいです。 下記でダブルクリックした行のインデックスは取得できたのですが、 その行の1列目の値、2列

  • 解決済

    jqueryのdieとliveについて

    $(document).ready(function(){ $("#hogehoge").die("change"); $("#hogehoge").live("c

  • 解決済

    ajaxでphpを呼んだけど、alertが出ない

    さきほど、「alertが出ない」ことで質問しました。 さきほどのhtmlにajaxを加えたんですが、alertが出ません。 ループしながらphpを呼ぶテストプログラムを書いてい

同じタグがついた質問を見る

  • JavaScript

    16444questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML5

    4025questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2074questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。