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

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

新規登録して質問してみよう
ただいま回答率
86.12%
Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

受付中

WEBページ可視領域外への安定的な処理

Meli_ssa
Meli_ssa

総合スコア0

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0回答

0リアクション

2クリップ

647閲覧

投稿2022/09/19 09:00

編集2022/09/27 13:34

実現したいこと

汎用的に使える事を目的としたtext highlight系のスクリプトを作成しています。
window.addEventListenerのloadだけでは、Google画像検索ページだとかYahoo!トップページだとかYouTubeなどの縦に長いサイトに対して、途中でページが新たに継ぎ足された場合、その領域にまでは再度処理を行ってくれません。

これを解消させる為に、
setIntervalsetTimeoutで何回か繰り返したのちにイベントを停止させることも試みましたが、この処理がかさむほどに動作も重くなって最悪メモリが解放されます。

https://blog.ikappio.com/check-page-height-change-with-javascript/#イベントリスナーで高さをチェックする

こちら様のサイトを参考にして、カスタマイズしてみたのですがGoogle画像検索タブページやYouTubeなどでは反応しないか、反応したとしてもScroll動作などが重くなってしまいます。

Google画像検索タブページやYouTubeなどでもScrollの動作や画面表示などに悪影響を与えることなく可視領域外にも安定的に処理を反映させるいい方法はないでしょうか?

該当のソースコード

JavaScript

// const timerId = setInterval(() =>{ function _my_highlight_scope() { let lastClientHeight = 0; //------------------------------------// // load 及び Scroll の複数イベントハンドラを登録。 function _highlight_event_scroll() { let _URL = new Array(); let _TXT = new Array(); let _CSS = new Array(); // include (指定URL包含) // 正規表現を分割したいので、いったん以下の方法で改行編集してから代入 let total_url = new RegExp([ // Google検索 /^(.*)www.google.(co.jp|com)\/search\?q.*$/i, // Yahoo!トップ /|^(.*)\/\/www.yahoo.co.jp\/?$/i, // teratail /|^https?:\/\/teratail.com\/.*$/i, // YouTube /|^https?:\/\/www.youtube.com\/?.*$/i, ].map((r)=> { return r.source }).join('')); //------------- // exclude (指定URL除外 ) // Google画像検索ページを除外していたが、最も執着している内容になったので急遽コメントアウト let url = location.href; // if (url.search(/.*&source=lnms\&tbm=isch\&.*/) !== -1) return; // if (url.search(/.*&tbm=isch\&(source|ved|sa)=.*/) !== -1) return; // if (url.indexOf('&sclient=img&ei=') !== -1) return; let fxed_css = 'color:unset; font-weight:unset;'; //ハイライトその1 _URL.push(total_url); _TXT.push(/(JavaScript)/i); //任意のhighlightしたい単語を指定。 // パステルブルー _CSS.push('background:#00CCFF;' + fxed_css); //------------- //ハイライトその2 _URL.push(total_url); _TXT.push(/(chrome)/i); // エメラルドグリーン _CSS.push('background:#2fffb4;' + fxed_css); //------------- //ハイライトその3 _URL.push(total_url); _TXT.push(/(firefox)/i); // オレンジ色 _CSS.push('background:#FFA45DFF;' + fxed_css); //------------- //------------------------------------// // if(lastClientHeight !== (document.body.clientHeight)||(document.documentElement.clientHeight)){ if (lastClientHeight !== (document.body.clientHeight)) { //------------------------------------// for (ind in _URL) { if (_URL[ind].test(window.location.href) == true) { for (let tx = document.evaluate('//text()[normalize-space(.)!=""]', document, null, 6, null), t, i = 0; t = tx.snapshotItem(i); i++) { let before = t.textContent, st, matched = false; // 特定のtag要素は除外する // ブックマーク時にハイライト部分のタイトルが消滅するので <TITLE> 除外 // コピペするときに消滅するので <TEXTAREA> <INPUT> を除外 if( t.parentNode.tagName=='STYLE'||t.parentNode.tagName=='SCRIPT'|| t.parentNode.tagName=='TITLE'||t.parentNode.tagName=='META'|| t.parentNode.tagName=='TEXTAREA'||t.parentNode.tagName=='INPUT'|| t.parentNode.tagName=='VIDEO'||t.parentNode.tagName=='IMG' // || ) continue; while ((st = before.search(_TXT[ind])) != -1) { t.parentNode.insertBefore(document.createTextNode(before.substr(0, st)), t); let elem_s = document.createElement('span'); // 自作したspan要素にclass名付与 elem_s.className = 'highlight_color'; t.parentNode.appendChild(elem_s); with(t.parentNode.insertBefore(document.createElement('span'), t)) textContent = RegExp.$1, style.cssText = _CSS[ind]; //↓これで選択範囲と競合しない if (window.getSelection().toString()) { _CSS.remove(); } // elem_s.classList.add("notranslate"); matched = true; // 否定処理? before = before.substr(st + RegExp.$1.length); if (matched) t.textContent = before; } } } } //------------------------------------// // body要素の可視部の高さが0だった場合イベントを初期化します。 init(); // 直前の高さを保持し直す lastClientHeight = document.body.clientHeight; // ||document.documentElement.clientHeight; } // body要素の可視部の高さが0だった場合、イベント再起。 update(); //------------------------------------// }; window.addEventListener('load', _highlight_event_scroll, false); window.addEventListener('scroll', _highlight_event_scroll, false); // window.addEventListener('wheel', _highlight_event_scroll, false); //------------------------------------// }; _my_highlight_scope(); // },1500); // setTimeout(() => { clearInterval(timerId); //alert('stop'); // }, 30000);

試したこと

コード欄にコメントアウトで残骸を残していますが、
document.documentElement.clientHeight;を使うと、YouTubeでも反応しますがScroll動作が極端に重くなってしまいます。
setIntervalsetTimeoutで何回か繰り返したのちにイベントを停止させることも試みましたがこの処理がかさむほどに動作も重くなって最悪メモリが解放され画面が真っ白になります。

wheelなども動作が重くなります。

補足情報(FW/ツールのバージョンなど)

9/19 23:40頃 補足
指定URL包含の仕方が正しくなかった(余計なサイトもincludeしていた)ので、大まかにその部分だけ修正しました。

9/21 18:30頃 追記
なんとかYouTubeで安定的にhighlightする方法を編み出しました。
consoleログのエラーも抑えました。上記のコード内容とは少々違うけどね...
とは言え、私が作成したもの以上に素晴らしい回答が付く可能性も考えてこのままにしておきます。
私の方法は汎用的なものとYouTube専用のものとを分けざるを得ない書き方です。
できれば両方とも使えるようにまとめられれば望ましいと考えています。

あとGoogle画像ページだけは綺麗に処理できない。YouTube以上に難しいです...

以下のような質問にはリアクションをつけましょう

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

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

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

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

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

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

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。