解决中文 hash tag 在 Firefox 中语法错误问题

解决中文 hash tag 在 Firefox 中语法错误问题

使用 URI component 规避错误

Web Notes

2016.09.29

0 #jekyll #firefox

最近重建博客模板,新加入了 scrollspy,又按网上的建议,增加了 smooth scrolling。按预想,点击侧边栏目录中的锚点可以滚动到文中相应的标题位置,这在 Edge 和 Chrome 中都能很好运行,而在 Firefox 中却因为中文 hash tag 出现了语法错误。

在 Firefox 中,对于英文的 anchor,解析并没有什么问题,而非英文的 anchor 就提示 Syntax error, unrecognized expression。一开始还打算放弃这块,毕竟只有 Firefox 里面才有问题,可是对于强迫症我心心念念,还是打算一探究竟。

原来在 smooth scrolling 那段代码中,用到了 windows.location.hash 这个属性,然而这个属性在 Firefox 下遇到中文时却会被自动转码为 UTF-8,这就和正文中 heading 的 id 设定不一样了,而且还会提示上面的语法错误。

在 JavaScript 中有三个编码函数 escape, encodeURI, encodeURIComponent,而其对应相应解码函数分别为:unescape, decodeURI, decodeURIComponent。这里只需要用到最后一个解码函数 decodeURIComponent 就能解决上述问题了。

以下是我用到的 smooth scrolling 代码:

// Add smooth scrolling on all links inside the navbar
$('#navbar a').on('click', function(event) {
    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
    // Prevent default anchor click behavior
    event.preventDefault();

    // Store hash
    var hash = decodeURIComponent(this.hash);

    // Using jQuery's animate() method to add smooth page scroll
    // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
    $('html, body').animate({
        scrollTop: $(hash).offset().top - 10
    }, 800, function(){

        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
    });
    }  // End if
});

加入 decodeURIComponent 后在几种浏览器中测试都没有问题。

林宏

Frank Lin

Hey, there! This is Frank Lin (@flinhong), one of the 1.4 billion 🇨🇳. This 'inDev. Journal' site holds the exploration of my quirky thoughts and random adventures through life. Hope you enjoy reading and perusing my posts.

YOU MAY ALSO LIKE

Using Liquid in Jekyll - Live with Demos

Web Notes

2016.08.20

Using Liquid in Jekyll - Live with Demos

Liquid is a simple templating language that Jekyll uses to process pages on your site. With Liquid you can output an modify variables, have logic statements inside your pages and loop over content.

给博客换新颜

小日子

2019.06.28

给博客换新颜

最近给博客匆匆换了主题,顺便打理一下这个荒废了很长一段时间的博客,重新投入使用。

TRENDING