三民大辞典新版（6月13日最终更新，dictTango完美支持，用GD的朋友请绕道）

汉汉
, ,
85

脚本隔离最关键的地方就是要获取当前词条的DOM元素。最简单的方法就是导出MDX文本，给所有词条的HTML加上特殊的标签名，然后在JS脚本里查询Dom元素的时候，加上这个标签名。

<html class="random_name">...</html>

document.querySelector(".random_name ...")  // JS脚本里有很多类似的查询方法

上面的方法，基本可以解决词典间的脚本冲突问题，还有就是词典内的脚本冲突，可以通过合并同名词条解决，也可通过脚本解决的话，可以参考下面的实现：

// 假设是双解切换词典，通过点击事件获取当前词条的DOM元素：
function click(event) {
  var child = event.target;
  var parent = child.closest('.random_name');  //当前词条的DOM元素
}

另外脚本自身也可以获取自身所在的词条DOM元素：

var child = document.currentScript;
var parent = child.closest('.random_name');  // 当前词条的DOM元素

解决脚本冲突，基本就上面的三种方法。

可以通过JS脚本监听visualViewport的变化，重新固定导航栏位置，实现position: fixed的效果。

参考样例：

https://wicg.github.io/visual-viewport/examples/absolute-fixed-to-viewport.html

3 个赞