とても単純なことですが、知っていればできるし、知らなければできないのです。ロジックはまったくありません。印象を深めるために、簡単に記録します。
可視性の変更
Visibilitychange はブラウザのタブの切り替えを監視できます。
コードに直接移動します。
<script>
document.addEventListener('visibilitychange', documentVisibilityChange)
function documentVisibilityChange() {
if(document.visibilityState === "hidden") {
console.log('当前页签隐藏,即打开新页签')
}
if(document.visibilityState === "visible") {
console.log('当前页签显示,即打开当前页签')
}
}
</script>
荷降ろし前
beforeunload はページの終了を監視でき、タブの切り替えはトリガーされません。
- ブラウザウィンドウが閉じられるとトリガーされます
- 現在のアドレス バーまたはお気に入りをクリックして別のページに入るときにトリガーされます (新しいタブは開かないことに注意してください)
- ブラウザを更新するときにトリガーされます
- window.location.href の値が再割り当てされるときにトリガーされます。
- 指定されたアクションを持つフォームがフォーム入力 type="submit" ボタンを通じて送信されるとトリガーされます (ネイティブ イベント)
他の状況もあるかもしれません。興味があれば、詳細をご覧ください。私はブラウザを更新するときに使用しました。
<script>
window.addEventListener('beforeunload', windowBeforeUnload)
function windowBeforeUnload() {
console.log('触发beforeunload --->>>')
}
</script>