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

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

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

HttpWebRequestとは.NETにおけるクラスであり、WebRequestクラスをHTTPに導入するものです。

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

HttpWebRequest

HttpWebRequestとは.NETにおけるクラスであり、WebRequestクラスをHTTPに導入するものです。

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リアクション

1クリップ

468閲覧

投稿2022/09/24 13:05

編集2022/10/04 17:53

前提、実現したいこと

独自の見出し(TOC、outliner)を作成しています。WEBページのhタグなどを拾って一覧にし、それをクリックすることでその要素にジャンプできるといった類のものです。

形的にはそれなりに仕上がってはいるんですが、自作TOCが抽出したリンクをクリックした直後に、WEBページ状態の変更(特にYahoo!ホームページなどの縦に長いサイト)を検知し、それに伴って必要とあらば自作TOCも更新してTOCの一覧の内容をアップデートし、改めて自作TOCの一覧を自動的に継ぎ足すといった処理を実装したいのですが、理想とする内容を実装できずにいます。
WEBページ自体をリロードするのではなく、TOC(一部の特定の要素)だけを更新、表示を改めるといった処理が望ましいです。私の今回の場合は、目的の為にどんな処理が必要ですか?

JavaScriptとCSSを分けており、併用して使う形になります。keydownでTOCを呼び出し、様々な方法でTOCを消す仕様にしています。

該当のソースコード

JavaScript

function MY_TOC_IVENT_SCOPE() { document.addEventListener('keydown', (e) => { // 現時点では、とりあえず基本はChrome、Chromiumでの表示を想定しています。 if (e.ctrlKey && e.shiftKey && e.key == 'H') { // Firefoxは「H」キーが使えないので、 // if( e.altKey && e.shiftKey && e.key=='O' ){ function _my_toc_ivent() { let all, pLevel, cLevel, cList, counter, div, style, ol, li, a, i, j; let d = document; let toc = d.getElementById("created_toc"); let close_toc = d.getElementById("my_toc_close_btn"); // let _obj = document.createElement("iframe"); // toc.insertBefore(toc,_obj); // _obj.insertBefore(toc, _obj); if (toc) { d.body.removeChild(toc); d.body.removeChild(close_toc); } else { all = d.getElementsByTagName("*"); let toc = d.createElement("ol"); toc.onclick = new Function("event", ` let target=event.target,ols=target.getElementsByTagName("ol"),flag=target.flag==0; if(ols.length>0){ols.item(0).style.display=flag?"block":"none"; target.style.listStyleImage=flag?"none":"url(data:image/gif;)"; target.flag=flag?1:0;} `); let cList = toc; let pLevel = 1; let counter = [0, 0, 0, 0, 0, 0]; for (i = 0; i < all.length; i++) {      // 暫定的に<h3>までを指定。それ以降指定するとGoogle検索などで余計な項目も増える。 if (all.item(i).tagName.match(/^h([1-3])$/i)) { let cLevel = RegExp.$1; let a = d.createElement("a"); a.href = "javascript:;"; a.onclick = new Function(' let click_target = document.getElementsByTagName("h' + cLevel + '").item(' + counter[cLevel - 1] + '); click_target.scrollIntoView((true)); window.scrollBy(0, -57); click_target.classList.add("active-animation"); setTimeout(()=>{ click_target.classList.remove("active-animation");}, 2500); '); // window.requestAnimationFrame(()=>{ }); // a.onclick = new Function(' let click_target = document.getElementsByTagName("h'+cLevel+'").item('+counter[cLevel-1]+'); click_target.scrollIntoView((true)); window.scrollBy(0, -57); click_target.classList.add("active-animation"); setTimeout(()=>{ click_target.classList.remove("active-animation");}, 2500); document.getElementById("created_toc").src += `?v=${new Date().getTime()}`; '); a.appendChild(d.createTextNode(all.item(i).textContent)); let li = d.createElement("li"); li.appendChild(a); counter[cLevel - 1]++; if (cLevel > pLevel) { ol = d.createElement("ol"); ol.style.padding = "1em"; ol.style.margin = "0em 1em"; ol.appendChild(li); if (cList.lastChild) { cList.lastChild.appendChild(ol); } else { cList.appendChild(ol); } cList = ol; } else if (cLevel < pLevel) { for (j = 0; j < (pLevel - cLevel) * 2; j++) if (cList.parentNode) cList = cList.parentNode; cList.appendChild(li); } else { cList.appendChild(li); } pLevel = cLevel; } } let style = d.createElement("style"); style.appendChild(d.createTextNode(` /* 編集しづらいのでCSSエディタに移動。*/ `)); let div = d.createElement("div"); div.id = "created_toc"; div.appendChild(style); div.appendChild(toc, close_toc); d.body.insertBefore(div, d.body.firstChild); document.body.insertAdjacentHTML('beforeend', ` <input type="button" id="my_toc_close_btn" value="X" /> `); } }; _my_toc_ivent(); } }); //---------------------------------------------------- // Outliner以外の要素をクリックで非表示にする。 document.addEventListener('click', (c) => { let toc = document.getElementById("created_toc"); let close_toc = document.getElementById("my_toc_close_btn"); if (toc, close_toc) { if (!c.target.closest('#created_toc')) { document.body.removeChild(toc); document.body.removeChild(close_toc); } } }); // 「x」ボタンクリックで非表示にする。 document.getElementById("my_toc_close_btn") .addEventListener('click', () => { let toc = document.getElementById("created_toc"); let close_toc = document.getElementById("my_toc_close_btn"); if (toc, close_toc) { document.body.removeChild(toc); document.body.removeChild(close_toc); } }); //---------------------------------------------------- let toc_list_update_ = //(document.getElementById("created_toc")); document.documentElement; let toc_list_update_resizeObserver = new MutationObserver(toc_list_ => { toc_list_update_resizeObserver.disconnect(); _my_toc_ivent(); toc_list_update_resizeObserver.observe(toc_list_update_, toc_list_update_config); }); let toc_list_update_config = { //attributes: true, childList: true, characterData: true, subtree: true, } toc_list_update_resizeObserver.observe(toc_list_update_, toc_list_update_config); }; MY_TOC_IVENT_SCOPE();

CSS

/* CSS アニメーションの動作 */ @keyframes my_toc_css { /* border: solid 2px red !important; */ 0% { outline-color: transparent; } 50% { outline-color: red; } 100% { outline-color: transparent; } } .active-animation { outline-width: 3px; outline-style: solid; outline-color: transparent; animation-name: my_toc_css; animation-iteration-count: 3; animation-duration: .8s; } /*************************************/ /* 自作したTOCの外観の装飾 */ #created_toc { text-align: left; position: fixed; display: flex; top: 0px; right: 0px; line-height: 100%; letter-spacing: 0.5em; /* max- を除外 */ width: 25%; height: 98%; line-height: 20em; /* ← Yahoo!トップページで使う場合はいる。 */ /* Firefoxは font-size:10px; line-height: 1.5em; */ font-size: 1px !important; /* ← ここを !important にしないとstylusに負ける。*/ overflow: auto; background: #eef1f1; -moz-opacity: 0.9; border-style: solid; border-width: 2px; border-color: #000; border-radius: 11px; z-index: 999999999; } #created_toc a:link { color: #0416fb; } #created_toc a:hover { color: #01afd5; } #created_toc ol { counter-reset: item; } #created_toc li { /* max-height: 50px; */ /* min-height: 20px; */ counter-increment: item; list-style-type: none; white-space: pre; /*word-break: keep-all;*/ } #created_toc li:before { font-size: smaller; /* word-break: keep-all;*/ content: counters(item, '.') '. '; cursor: ns-resize; } /* クローズボタンの装飾、表示位置 */ #my_toc_close_btn { padding: 0 0 0 0 !important; position: fixed; top: 0px; right: 24%; /* ← ここをpx指定にするとズーム調整で親要素から剥離する */ /* max- を除外 */ width: 1.2%; height: 2.5%; /* font-size: 100% !important; */ /* ← 急遽ボツ */ font-size: 1vmax !important; /* ← ページのズーム率に影響されない。*/ font-weight: bold !important; font-family: sans-serif !important; box-shadow: inset 0 0 3px #110e0e8f; background: red; border-radius: 15px; z-index: 999999999; cursor: pointer; }

試したこと

new MutationObserverを前提にWEBページの状態の変化を検知し、それに伴ってTOCの内容の中身も変更できないか、試しています。
teratailだけは何故か正常にScrollJumpしてくれませんが、今回の自身の執着している事はそこではありません。

https://ameblo.jp/personwritep/entry-12637975230.html
https://q.hatena.ne.jp/1236447424#a901122

以下↓をもとにa.onclick=new Functionの中へ追記するとTOCが破損した。
https://oshiete.goo.ne.jp/qa/5291845.html#a_area

その他
function reloadHoge() {
$.get(document.URL).done(function(data, textStatus, jqXHR) {
const doc = new DOMParser().parseFromString(data, 'text/html');
$('#created_toc').html(doc.querySelector('#created_toc').innerHTML);
});
}
setInterval(reloadHoge, 10000);

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

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

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

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

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

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

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

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

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

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

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

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

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

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

HttpWebRequest

HttpWebRequestとは.NETにおけるクラスであり、WebRequestクラスをHTTPに導入するものです。

JavaScript

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

jQuery

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

HTML

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

CSS

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