teratail
回答率
85.47%
質問するログイン新規登録
トップHttpWebRequestに関する質問WEBページの変化に伴い、一部の特定の要素だけを更新表示する方法

編集履歴

質問編集履歴

11

<h3>までを指定の理由

2022/10/04 17:53

投稿

Meli_ssa
Meli_ssa

スコア0

test CHANGED
File without changes
test CHANGED
@@ -46,7 +46,8 @@
46
46
  let pLevel = 1;
47
47
  let counter = [0, 0, 0, 0, 0, 0];
48
48
  for (i = 0; i < all.length; i++) {
49
+ 　　　　　// 暫定的に<h3>までを指定。それ以降指定するとGoogle検索などで余計な項目も増える。
49
- if (all.item(i).tagName.match(/^h([1-3])$/i)) { // 実験的、暫定的に<h1><h2><h3>までを指定
50
+ if (all.item(i).tagName.match(/^h([1-3])$/i)) {
50
51
  let cLevel = RegExp.$1;
51
52
  let a = d.createElement("a");
52
53
  a.href = "javascript:;";
HttpWebRequestJavaScriptjQueryHTMLCSS

10

追記修正。もう修正しないと思います

2022/10/04 16:35

投稿

Meli_ssa
Meli_ssa

スコア0

test CHANGED
File without changes
test CHANGED
@@ -136,7 +136,7 @@
136
136
  document.documentElement;
137
137
  let toc_list_update_resizeObserver = new MutationObserver(toc_list_ => {
138
138
  toc_list_update_resizeObserver.disconnect();
139
- MY_TOC_IVENT_();
139
+ _my_toc_ivent();
140
140
  toc_list_update_resizeObserver.observe(toc_list_update_, toc_list_update_config);
141
141
  });
142
142
 
HttpWebRequestJavaScriptjQueryHTMLCSS

9

誰かが「大文字のスコープ内に大文字のスコープを使うとややこしくなる」とコメントしていたのを思い出し、途中まで同名の関数だったので、まあそれも一理あるなと...

2022/10/04 16:19

投稿

Meli_ssa
Meli_ssa

スコア0

test CHANGED
File without changes
test CHANGED
@@ -17,7 +17,7 @@
17
17
  if (e.ctrlKey && e.shiftKey && e.key == 'H') {
18
18
  // Firefoxは「H」キーが使えないので、
19
19
  // if( e.altKey && e.shiftKey && e.key=='O' ){
20
- function MY_TOC_IVENT_() {
20
+ function _my_toc_ivent() {
21
21
 
22
22
  let all, pLevel, cLevel, cList, counter, div, style, ol, li, a, i, j;
23
23
  let d = document;
@@ -100,7 +100,7 @@
100
100
  }
101
101
 
102
102
  };
103
- MY_TOC_IVENT_();
103
+ _my_toc_ivent();
104
104
 
105
105
  }
106
106
  });
HttpWebRequestJavaScriptjQueryHTMLCSS

8

ほぼ同内容だが「 window.addEventListener('load',(event)=>{});」改め「toc.onclick=new Function("event", ``) 重要度低

2022/10/04 16:05

投稿

Meli_ssa
Meli_ssa

スコア0

test CHANGED
File without changes
test CHANGED
@@ -15,8 +15,8 @@
15
15
  document.addEventListener('keydown', (e) => {
16
16
  // 現時点では、とりあえず基本はChrome、Chromiumでの表示を想定しています。
17
17
  if (e.ctrlKey && e.shiftKey && e.key == 'H') {
18
- // Firefoxは「H」キーが使えないので、
18
+ // Firefoxは「H」キーが使えないので、
19
- // if( e.altKey && e.shiftKey && e.key=='O' ){
19
+ // if( e.altKey && e.shiftKey && e.key=='O' ){
20
20
  function MY_TOC_IVENT_() {
21
21
 
22
22
  let all, pLevel, cLevel, cList, counter, div, style, ol, li, a, i, j;
@@ -24,7 +24,7 @@
24
24
 
25
25
  let toc = d.getElementById("created_toc");
26
26
  let close_toc = d.getElementById("my_toc_close_btn");
27
-
27
+
28
28
  // let _obj = document.createElement("iframe");
29
29
  // toc.insertBefore(toc,_obj);
30
30
  // _obj.insertBefore(toc, _obj);
@@ -35,29 +35,25 @@
35
35
  } else {
36
36
  all = d.getElementsByTagName("*");
37
37
  let toc = d.createElement("ol");
38
- window.addEventListener('load', (l_event) => {
38
+ toc.onclick = new Function("event", `
39
- let target = l_event.target,
40
- ols = target.getElementsByTagName("ol"),
39
+ let target=event.target,ols=target.getElementsByTagName("ol"),flag=target.flag==0;
41
- flag = target.flag == 0;
42
- if (ols.length > 0) {
43
- ols.item(0).style.display = flag ? "block" : "none";
40
+ if(ols.length>0){ols.item(0).style.display=flag?"block":"none";
44
- target.style.listStyleImage = flag ? "none" : "url(data:image/gif;)";
41
+ target.style.listStyleImage=flag?"none":"url(data:image/gif;)";
45
- target.flag = flag ? 1 : 0;
42
+ target.flag=flag?1:0;}
46
- }
47
- });
43
+ `);
48
44
 
49
45
  let cList = toc;
50
46
  let pLevel = 1;
51
47
  let counter = [0, 0, 0, 0, 0, 0];
52
48
  for (i = 0; i < all.length; i++) {
53
- if (all.item(i).tagName.match(/^h([1-6])$/i)) {
49
+ if (all.item(i).tagName.match(/^h([1-3])$/i)) { // 実験的、暫定的に<h1><h2><h3>までを指定
54
50
  let cLevel = RegExp.$1;
55
51
  let a = d.createElement("a");
56
52
  a.href = "javascript:;";
57
53
 
58
- 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); ');
54
+ 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); ');
59
55
  // window.requestAnimationFrame(()=>{ });
60
-
56
+
61
57
  // 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()}`; ');
62
58
 
63
59
  a.appendChild(d.createTextNode(all.item(i).textContent));
@@ -148,7 +144,7 @@
148
144
  //attributes: true,
149
145
  childList: true,
150
146
  characterData: true,
151
- subtree: true,
147
+ subtree: true,
152
148
  }
153
149
  toc_list_update_resizeObserver.observe(toc_list_update_, toc_list_update_config);
154
150
 
HttpWebRequestJavaScriptjQueryHTMLCSS

7

window.requestAnimationFrame(()=>{ }); は、いらなかったので更にカット。

2022/09/27 21:15

投稿

Meli_ssa
Meli_ssa

スコア0

test CHANGED
File without changes
test CHANGED
@@ -46,7 +46,6 @@
46
46
  }
47
47
  });
48
48
 
49
-
50
49
  let cList = toc;
51
50
  let pLevel = 1;
52
51
  let counter = [0, 0, 0, 0, 0, 0];
@@ -56,11 +55,10 @@
56
55
  let a = d.createElement("a");
57
56
  a.href = "javascript:;";
58
57
 
59
- a.onclick = new Function('let click_target = document.getElementsByTagName("h'+cLevel+'").item('+counter[cLevel-1]+'); window.requestAnimationFrame(()=>{ click_target.scrollIntoView((true)); window.scrollBy(0, -57); click_target.classList.add("active-animation"); }); setTimeout(()=>{ click_target.classList.remove("active-animation");}, 2500); ');
60
- // click_target.setAttribute("id","my_toc_css"); // click_target.removeAttribute("id","my_toc_css");
61
- // click_target.style.cssText =""; // click_target.style.cssText ="animation-name:my_toc_css";
62
-
63
- // a.onclick = new Function('let click_target = document.getElementsByTagName("h'+cLevel+'").item('+counter[cLevel-1]+'); window.requestAnimationFrame(()=>{ 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()}`; ');
58
+ 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); ');
59
+ // window.requestAnimationFrame(()=>{ });
60
+
61
+ // 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()}`; ');
64
62
 
65
63
  a.appendChild(d.createTextNode(all.item(i).textContent));
66
64
 
@@ -89,12 +87,10 @@
89
87
  }
90
88
  }
91
89
 
92
-
93
90
  let style = d.createElement("style");
94
91
  style.appendChild(d.createTextNode(`
95
92
  /* 編集しづらいのでCSSエディタに移動。*/
96
93
  `));
97
-
98
94
  let div = d.createElement("div");
99
95
  div.id = "created_toc";
100
96
  div.appendChild(style);
@@ -104,8 +100,8 @@
104
100
  document.body.insertAdjacentHTML('beforeend', `
105
101
  <input type="button" id="my_toc_close_btn" value="X" />
106
102
  `);
103
+
107
104
  }
108
-
109
105
 
110
106
  };
111
107
  MY_TOC_IVENT_();
@@ -138,7 +134,6 @@
138
134
  }
139
135
  });
140
136
 
141
-
142
137
  //----------------------------------------------------
143
138
 
144
139
  let toc_list_update_ = //(document.getElementById("created_toc"));
@@ -163,7 +158,7 @@
163
158
  ```
164
159
 
165
160
  ```CSS
166
-
161
+ /* CSS アニメーションの動作 */
167
162
  @keyframes my_toc_css {
168
163
 
169
164
  /* border: solid 2px red !important; */
@@ -189,9 +184,7 @@
189
184
  animation-duration: .8s;
190
185
  }
191
186
 
192
-
193
187
  /*************************************/
194
-
195
188
 
196
189
  /* 自作したTOCの外観の装飾 */
197
190
  #created_toc {
@@ -246,7 +239,7 @@
246
239
  cursor: ns-resize;
247
240
  }
248
241
 
249
-
242
+ /* クローズボタンの装飾、表示位置 */
250
243
  #my_toc_close_btn {
251
244
  padding: 0 0 0 0 !important;
252
245
  position: fixed;
HttpWebRequestJavaScriptjQueryHTMLCSS

6

a.onclick = new Function('この中身をトータル約200文字程度はカット');

2022/09/27 06:56

投稿

Meli_ssa
Meli_ssa

スコア0

test CHANGED
File without changes
test CHANGED
@@ -56,10 +56,11 @@
56
56
  let a = d.createElement("a");
57
57
  a.href = "javascript:;";
58
58
 
59
- a.onclick = new Function('let click_target = document.getElementsByTagName("h'+cLevel+'").item('+counter[cLevel-1]+'); window.requestAnimationFrame(()=>{ click_target.scrollIntoView((true)); window.scrollBy(0, -57); click_target.style.cssText ="animation-name:my_toc_css"; click_target.classList.add("active-animation"); }); setTimeout(()=>{ click_target.classList.remove("active-animation"); click_target.style.cssText ="";}, 2500); ');
60
- // click_target.setAttribute("id","my_toc_css"); // click_target.removeAttribute("id","my_toc_css");
61
-
62
- // a.onclick=new Function(''let click_target = document.getElementsByTagName("h'+cLevel+'").item('+counter[cLevel-1]+'); window.requestAnimationFrame(()=>{ click_target.scrollIntoView((true)); window.scrollBy(0, -57); click_target.style.cssText ="animation-name:my_toc_css"; click_target.classList.add("active-animation"); }); setTimeout(()=>{ click_target.classList.remove("active-animation"); click_target.style.cssText ="";}, 2500); document.getElementById("created_toc").src += `?v=${new Date().getTime()}`;');
59
+ a.onclick = new Function('let click_target = document.getElementsByTagName("h'+cLevel+'").item('+counter[cLevel-1]+'); window.requestAnimationFrame(()=>{ click_target.scrollIntoView((true)); window.scrollBy(0, -57); click_target.classList.add("active-animation"); }); setTimeout(()=>{ click_target.classList.remove("active-animation");}, 2500); ');
60
+ // click_target.setAttribute("id","my_toc_css"); // click_target.removeAttribute("id","my_toc_css");
61
+ // click_target.style.cssText =""; // click_target.style.cssText ="animation-name:my_toc_css";
62
+
63
+ // a.onclick = new Function('let click_target = document.getElementsByTagName("h'+cLevel+'").item('+counter[cLevel-1]+'); window.requestAnimationFrame(()=>{ 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()}`; ');
63
64
 
64
65
  a.appendChild(d.createTextNode(all.item(i).textContent));
65
66
 
HttpWebRequestJavaScriptjQueryHTMLCSS

5

a.onclick = new Function('この中身を若干ですが簡素化');

2022/09/27 06:06

投稿

Meli_ssa
Meli_ssa

スコア0

test CHANGED
File without changes
test CHANGED
@@ -35,8 +35,8 @@
35
35
  } else {
36
36
  all = d.getElementsByTagName("*");
37
37
  let toc = d.createElement("ol");
38
- window.addEventListener('load', (event) => {
38
+ window.addEventListener('load', (l_event) => {
39
- let target = event.target,
39
+ let target = l_event.target,
40
40
  ols = target.getElementsByTagName("ol"),
41
41
  flag = target.flag == 0;
42
42
  if (ols.length > 0) {
@@ -51,13 +51,15 @@
51
51
  let pLevel = 1;
52
52
  let counter = [0, 0, 0, 0, 0, 0];
53
53
  for (i = 0; i < all.length; i++) {
54
- if (all.item(i).tagName.match(/^h([1-4])$/i)) { // h5 以降を含めると精度が狂う。
54
+ if (all.item(i).tagName.match(/^h([1-6])$/i)) {
55
55
  let cLevel = RegExp.$1;
56
56
  let a = d.createElement("a");
57
57
  a.href = "javascript:;";
58
58
 
59
- a.onclick = new Function('let click_target = document.getElementsByTagName("h' + cLevel + '").item(' + counter[cLevel - 1] + '); window.requestAnimationFrame(function() {click_target.scrollIntoView((true)); window.scrollBy(0, -57); click_target.setAttribute("id","my_toc_css"); click_target.style.cssText ="animation-name:my_toc_css"; click_target.classList.add("active-animation"); }); setTimeout(function() {click_target.classList.remove("active-animation"); click_target.removeAttribute("id","my_toc_css"); click_target.style.cssText ="";}, 2500); ');
60
- // a.onclick=new Function('let click_target = document.getElementsByTagName("h'+cLevel+'").item('+counter[cLevel-1]+'); window.requestAnimationFrame(function() {click_target.scrollIntoView((true)); window.scrollBy(0, -57); click_target.setAttribute("id","my_toc_css"); click_target.style.cssText ="animation-name:my_toc_css"; click_target.classList.add("active-animation"); }); setTimeout(function() {click_target.classList.remove("active-animation"); click_target.removeAttribute("id","my_toc_css"); click_target.style.cssText ="";}, 2500); document.getElementById("created_toc").src += `?v=${new Date().getTime()}`;');
59
+ a.onclick = new Function('let click_target = document.getElementsByTagName("h'+cLevel+'").item('+counter[cLevel-1]+'); window.requestAnimationFrame(()=>{ click_target.scrollIntoView((true)); window.scrollBy(0, -57); click_target.style.cssText ="animation-name:my_toc_css"; click_target.classList.add("active-animation"); }); setTimeout(()=>{ click_target.classList.remove("active-animation"); click_target.style.cssText ="";}, 2500); ');
60
+ // click_target.setAttribute("id","my_toc_css"); // click_target.removeAttribute("id","my_toc_css");
61
+
62
+ // a.onclick=new Function(''let click_target = document.getElementsByTagName("h'+cLevel+'").item('+counter[cLevel-1]+'); window.requestAnimationFrame(()=>{ click_target.scrollIntoView((true)); window.scrollBy(0, -57); click_target.style.cssText ="animation-name:my_toc_css"; click_target.classList.add("active-animation"); }); setTimeout(()=>{ click_target.classList.remove("active-animation"); click_target.style.cssText ="";}, 2500); document.getElementById("created_toc").src += `?v=${new Date().getTime()}`;');
61
63
 
62
64
  a.appendChild(d.createTextNode(all.item(i).textContent));
63
65
 
@@ -82,7 +84,6 @@
82
84
  } else {
83
85
  cList.appendChild(li);
84
86
  }
85
-
86
87
  pLevel = cLevel;
87
88
  }
88
89
  }
@@ -137,7 +138,7 @@
137
138
  });
138
139
 
139
140
 
140
- //**************************************
141
+ //----------------------------------------------------
141
142
 
142
143
  let toc_list_update_ = //(document.getElementById("created_toc"));
143
144
  document.documentElement;
HttpWebRequestJavaScriptjQueryHTMLCSS

4

「×」ボタンを見やすく新調

2022/09/25 05:00

投稿

Meli_ssa
Meli_ssa

スコア0

test CHANGED
File without changes
test CHANGED
@@ -253,9 +253,10 @@
253
253
  /* max- を除外 */
254
254
  width: 1.2%;
255
255
  height: 2.5%;
256
- font-size: 100% !important;
256
+ /* font-size: 100% !important; */ /* ← 急遽ボツ */
257
+ font-size: 1vmax !important; /* ← ページのズーム率に影響されない。*/
257
258
  font-weight: bold !important;
258
- /* font-family: sans-serif !important; */
259
+ font-family: sans-serif !important;
259
260
  box-shadow: inset 0 0 3px #110e0e8f;
260
261
  background: red;
261
262
  border-radius: 15px;
HttpWebRequestJavaScriptjQueryHTMLCSS

3

たかがCSSされどCSS、個人的に苦労した大事な点。わかりやすく記録に。

2022/09/24 22:53

投稿

Meli_ssa
Meli_ssa

スコア0

test CHANGED
File without changes
test CHANGED
@@ -249,7 +249,7 @@
249
249
  padding: 0 0 0 0 !important;
250
250
  position: fixed;
251
251
  top: 0px;
252
- right: 24%;
252
+ right: 24%; /* ← ここをpx指定にするとズーム調整で親要素から剥離する */
253
253
  /* max- を除外 */
254
254
  width: 1.2%;
255
255
  height: 2.5%;
HttpWebRequestJavaScriptjQueryHTMLCSS

2

コメントアウト微調整

2022/09/24 22:47

投稿

Meli_ssa
Meli_ssa

スコア0

test CHANGED
File without changes
test CHANGED
@@ -203,12 +203,9 @@
203
203
  /* max- を除外 */
204
204
  width: 25%;
205
205
  height: 98%;
206
- line-height: 20em;
207
- /* ← Yahoo!トップページで使う場合はいる。 */
206
+ line-height: 20em; /* ← Yahoo!トップページで使う場合はいる。 */
208
- /* Firefoxは font-size:10px; line-height: 1.5em;*/
207
+ /* Firefoxは font-size:10px; line-height: 1.5em; */
209
- font-size: 1px !important;
210
- /* ← ここを !important にしないとstylusに負ける。*/
208
+ font-size: 1px !important; /* ← ここを !important にしないとstylusに負ける。*/
211
-
212
209
  overflow: auto;
213
210
  background: #eef1f1;
214
211
  -moz-opacity: 0.9;
@@ -256,12 +253,9 @@
256
253
  /* max- を除外 */
257
254
  width: 1.2%;
258
255
  height: 2.5%;
259
- /*font-size: 150% !important;*/
260
- /* ← ここを !important にしないとstylusに負ける。*/
261
- /* Firefoxは font-size:10px; line-height: 1.5em;*/
262
256
  font-size: 100% !important;
263
257
  font-weight: bold !important;
264
- /*font-family: sans-serif !important;*/
258
+ /* font-family: sans-serif !important; */
265
259
  box-shadow: inset 0 0 3px #110e0e8f;
266
260
  background: red;
267
261
  border-radius: 15px;
HttpWebRequestJavaScriptjQueryHTMLCSS

1

とりあえず基本はChrome、Chromiumでの表示を想定しています。

2022/09/24 13:46

投稿

Meli_ssa
Meli_ssa

スコア0

test CHANGED
File without changes
test CHANGED
@@ -13,10 +13,12 @@
13
13
  ```JavaScript
14
14
  function MY_TOC_IVENT_SCOPE() {
15
15
  document.addEventListener('keydown', (e) => {
16
+ // 現時点では、とりあえず基本はChrome、Chromiumでの表示を想定しています。
16
17
  if (e.ctrlKey && e.shiftKey && e.key == 'H') {
18
+ // Firefoxは「H」キーが使えないので、
19
+ // if( e.altKey && e.shiftKey && e.key=='O' ){
17
20
  function MY_TOC_IVENT_() {
18
- // Firefoxは「H」キーが使えないので、
21
+
19
- // if( e.altKey && e.shiftKey && e.key=='O' ){
20
22
  let all, pLevel, cLevel, cList, counter, div, style, ol, li, a, i, j;
21
23
  let d = document;
22
24
 
HttpWebRequestJavaScriptjQueryHTMLCSS