应用场景

使用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);