機能 ショートカットキー
リファレンス(参考URL)一覧へ移動 R
記事URLをMarkDownとしてコピー Ctrl+M
前のコードタグへ移動 Ctrl+←
次のコードタグへ移動 Ctrl+→
ヘルプを表示・非表示 H
Tips
- ショートカットキーは記事上で有効です。ヘッダー/フッター付近では機能しないことがあります。
- コードタグ移動機能がうまく動かないときは、Shift+F5でページを更新してみてください。
- このウィンドウを閉じるには、Hキーをもう一度押してください

JavaScriptでYoutubeのURLの変化を監視するには

プログラミング

youtubeは動画を移動するときに、非同期で通信しているので、
ユーザースクリプトなんかが使いにくいです。

HTML(=動画)が変わったらスクリプトを再度実行する、っていう処理をしたい場合は、URLの変化を監視するのがよさそうですが…

通常、hashchangeあたりでできるらしいのですが、

window.onhashchange = function() {
console.log('y')
}

window.addEventListener('hashchange', function(e){console.log('hash changed')});

document.addEventListener("hashchange", function(){cosole.log('y')});

window.onbeforeunload = function(e) {
  return 'Dialog text here.';
};

Youtubeはできないみたいなので、こうするしかないっぽいですね。

var youtubeUrl = setInterval(function(){console.log(document.location.href)} , 1000)

一秒ごとにURLの変化を確認して変化があれば処理をする例:

// 処理*1

var youtubeUrlPrevious = document.location.href

var youtubeUrl = setInterval(function(){
    if (document.location.href==youtubeUrlPrevious){
    } else {
        // 処理*2

        youtubeUrlPrevious = document.location.href
    }
    } , 1000)

処理1がURLが変化する前にしたい処理
処理2がURLが変化したら実装される処理
なので、
基本的には、処理1と2に同じ処理を書くと良いと思います。

この記事で欲しい情報が見つからなかった方へ

この記事の更新情報がある場合があります。
この記事は以下の記事とも関連性があると思われます。

JavaScript 非表示パスワードを表示する ブックマークレット
URLからクエリストリングを削除するJavaScriptを書いた
Webページのリダイレクト速度比較 HTML vs JavaScript vs .htaccess
chromeデベロッパーツールからrequire()するといつも使う関数や変数を呼び出して使えるようにする[JavaScript]
Javascriptで例外処理
YouTubeのLiked videosのデータをCSVにするJavaScriptスクリプトを書いた
JavaScript YoutubeでHTML5動画が再生されているか判定


管理人の方針で、既存の記事の編集はせず、新しい情報や大きな既存情報の更新があった場合には、新しい記事として公開することになっています。
当記事で欲しい情報が見つからなかった・解決に至らなかった場合、これらのリンクがお役に立てるかも知れません。

どうやってこの関連記事を生成しているの?
この機能のPHPソースコード(2500行)

コメントを残す

Close Menu