- Published on
JavaScriptでYoutubeのURLの変化を監視するには
868文字2分で読めます–––
閲覧数
- Authors
- Name
- Shou Arisaka nyapp.buzz/shou
- short bio
- Z世代の情報技術者。Next.jsで自作SNSを個人開発中。
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)
処理１がURLが変化する前にしたい処理 処理２がURLが変化したら実装される処理 なので、 基本的には、処理１と２に同じ処理を書くと良いと思います。
15歳でWordPressサイトを立ち上げ、ウェブ領域に足を踏み入れる。翌年にはRuby on Railsを用いたマイクロサービス開発に着手し、現在はデジタル庁を支えたNext.jsによるHP作成やSaaS開発のプロジェクトに携わりながら、React.js・Node.js・TypeScriptによるモダンなウェブアプリの個人開発を趣味でも行う。
フロントエンドからバックエンドまで一貫したアジャイルなフルスタック開発を得意とし、ウェブマーケティングや広告デザインも必要に応じて担当、広告運用・SEO対策・データ分析まで行う低コストかつ高品質な顧客体験の提供が好評。
国内外から200万人を超える人々に支えられ、9周年を迎えるITブログ「yuipro」の開発者、デザイナーでありライター。現在ベータ段階の自作SNS「nyapp.buzz」を日本一の国産SNSとするべく奮闘中。
何かご質問がありますか？
