WebサイトのHTMLソースを抜粋して『テキストエリア』として表示するコードがあります(ブックマークレットとして実行します)
【やりたいこと・1】
通常は、Webブラウザの枠の左上に『テキストエリア』が表示されるのですが、たまに右上に表示される場合がありますので、必ず左上に表示したいです。
【やりたいこと・2】
表示中のサイトで、浮いている要素がある場合、『テキストエリア』が浮いている要素の裏側に隠れて表示されてしまいます。
(ワードプレスにログイン中、サイト上部に表示されるメニューなど)
これを、必ず一番手前側に表示して見えるようにしたいです。
以下はコードです。どこを修正すれば良いでしょうか?
javascript:
(function() {
const d_ = document;
Array.prototype.forEach.call(d_.body.querySelectorAll("script,style,noscript"), function(e) { e.parentNode.removeChild(e); }); const text = d_.body.textContent.replace(/\s+/g, ""); const count = text.length; const title = d_.title; const hx_list = d_.querySelectorAll("h1,h2,h3,h4,h5,h6"); const panel = d_.body.appendChild(d_.createElement("textarea")); panel.style.position = "fixed"; panel.style.backgroundColor = "white"; panel.style.border = "1px solid black"; panel.style.padding = "1ex"; panel.style.top = "20px"; panel.style.width = "80ex"; panel.style.height = "20em"; function indent(tag) { let n = parseInt(tag.replace(/^H/, "")) - 1; let pad = ""; for (let i = 0 ; i < n ; ++i) { pad += "\t"; } return pad; } panel.value = [ "【文字数】", count, "\n【title】", title, "\n【hタグ】", Array.prototype.map.call(hx_list, function(h) {return indent(h.tagName) + h.tagName + ":" + h.textContent;}).join("\n"), ].join("\n");
})();
回答2件
あなたの回答
tips
プレビュー