应用场景
使用Typora记录笔记的时候虽然支持页间跳转,但是不支持文档之间的跳转,很不方便。所以,我自己为Typora添加一点小功能,毕竟这是个伪装成Markdown编辑器的浏览器。
实现方式
起跳节点:
<!--使用a标签,name为jump,#跟随锚点-->
<a name="jump" href="./2.md#test">testJump</a>
锚点节点:
<!--name和锚点一致-->
<span name="test" >hello</span>
在frame.js
末尾添加以下代码:
该文件在安装目录下,搜索一下就可以得到
var content = document.getElementsByTagName("content")[0];
content.addEventListener("load", function() {
window.setTimeout(function() {
var elements = document.querySelectorAll("a[name=jump]");
// 为每一个标记都添加点击事件
for (let index = 0; index < elements.length; index++) {
const element = elements[index];
console.log(element);
element.addEventListener("click", function(e) {
var reg = new RegExp('\#[^"]+', ["g"]);
var outText = element.attributes[1].textContent;
var jumpValue = reg.exec(outText)[0];
window.localStorage.setItem("jump", jumpValue);
}, true);
}
}, 100);
},true);
content.addEventListener("load", function() {
window.setTimeout(function() {
//获取需要寻找的元素
var value = localStorage.getItem("jump");
var name = value.slice(1, value.length);
var selector = "[name=" + name + "]";
var element = document.querySelector(selector);
var top = element.offsetParent.offsetTop;
document.getElementsByTagName("content")[0].scrollTop = top+60;
}, 100);
},true);
content.addEventListener("load", function() {
window.setTimeout(function() {
localStorage.removeItem("jump");
}, 1000);
},true);