关于所谓的大纲视图(toc)函数。
【规格】
使用150%的浏览器缩放率进行调整。
用于带有 "Ctrl" + "Shift" + "H"
钥匙。
firefox无法使用h键,因此暂时显示为 "Alt" + "Shift" + "O"
钥匙。
按相同的键将其隐藏,或者单击大纲视图以外的元素将其隐藏。或者,按下红色的“x”按钮将其隐藏。
对于firefox,id(#created_toc)元素的字体大小为:10px;线高:1.5em;请替换为。
document.addEventListener('keydown', (e) => {
if (e.ctrlKey && e.shiftKey && e.key == 'H') {
// Firefox cannot use the "H" key, so
// if( e.altKey && e.shiftKey && e.key=='O' ){
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");
if (toc) {
d.body.removeChild(toc);
d.body.removeChild(close_toc);
} else {
all = d.getElementsByTagName("*");
let toc = d.createElement("ol");
//let close_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++) {
if (all.item(i).tagName.match(/^h([1-6])$/i)) {
let cLevel = RegExp.$1;
let a = d.createElement("a");
//a+=" ";
a.href = "javascript:;";
a.onclick = new Function('document.getElementsByTagName("h' + cLevel + '").item(' + counter[cLevel - 1] + ').scrollIntoView();');
a.appendChild(d.createTextNode(all.item(i).textContent));
/*
d.createElement("a").onclick = (event) => {
toggle(event);
target.focus();
};
*/
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(`
# created_toc{
text-align:left;
position:fixed;
top:0px;
right:0px;
/* max- Exclude */
width:25%;
height:98%;
/*☆☆☆ Firefox font-size:10px; line-height:1.5em; ☆☆☆*/
font-size:1px;
line-height: 20em;
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{
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{
position:fixed;
align-items: center;
text-align:justify-all;
line-height:5px;
/* justify-content:center; */
/* display:inline-block; */
margin-right:240px;
top:0px;
right:8px;
background:red;
font-size:10px;
height:12px;
width:13px;
content:"x";
color:#000;
border-radius:4px;
cursor:pointer;
z-index:999999999;
}
`));
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" />
`);
}
}
// Clicking on an element other than the outliner hides the outliner element.
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);
// document.getElementById("my_toc_close_btn").style.display="none";
}
}
});
// Hide the outliner by clicking the red "x" button.
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);
// document.getElementById("my_toc_close_btn").style.display="none";
}
});
});
【问题】
我个人认为这是一个不错的结果,但有一个问题。
在stackoverflow.com上https://stackoverflow.com/questions/tagged/javascript
(日本网站)雅虎!首页等。https://www.yahoo.co.jp/ 我可以毫无困难地跳到目标,
(问答网站)chiebukuro类别问答列表页面https://chiebukuro.yahoo.co.jp/category/2080401322/question/list?sort=16 例如,如果在大纲视图中运行流程,则流程将隐藏在固定(位置:固定;看起来是)选项卡,您最终将不得不手动向上滚动一点。
我查看了各种大纲视图和相关站点,但到目前为止,只有以下稍重的扩展解决了这个问题:https://chrome.google.com/webstore/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi
https://addons.mozilla.org/en/firefox/addon/headingsmap/?utm_content=addons-经理查看链接&utm\u medium=firefox浏览器&utm\u source=firefox浏览器
单击“大纲视图”(outliner)一侧的链接后立即跳转到实际链接时,我会重新编辑 focus()
我对实际的链接感到困惑,所以我个人认为我每次都一定能跳转到目标,
【我想要达到的目标】
如果是这样的话,可以对代码进行哪些更改以确保焦点和焦点实现理想的行为?
1条答案
按热度按时间uttx8gqw1#
【旧代码】
【自解代码】