【测试】各个软件对锚点跳转的支持度

由于各个软件对锚点跳转的支持实现都有所不同(比如Goldendict会改a标签上的id),而这会影响到词性跳转等重要功能,例如:【阿彌陀佛】类语大辞典2020.8.13写作利器!, 于是我做了一个简单的测试。

PART 1 页内锚点跳转

测试针对跳转目标的标签和属性分6种情况

  • 标签:是a标签/不是a标签
  • 属性:带id、带name,或者两者都带

为了简化叙述,后面使用目标标签+目标属性的格式来代替。示例:

    <!-- div+id -->
    <div id="yellow" class="box yellow">yellow div</div>
    <!-- a+id -->
    <a id="red" class="box red">red a</a>
    <!-- div+name -->
    <div name="blue" class="box blue">blue div</div>
    <!--a+name-->
    <a name="green" class="box green">green a</a>
    <!--div+id+name-->
    <div id="brown" name="brown" class="box brown">brown div</div>
    <!--a+id+name-->
    <a id="purple" name="purple" class="box purple">purple a</a>

测试用文件:Desktop.7z (1.5 KB)

结果如下:(0表示不能跳转,1表示可以跳转,div可以替换成span等其他非a标签)
| |div+id|a+id|div+name|a+name|div+id+name|a+id+name
|—|—|—|—|—|—|—|—|
Chrome(HTML)|1|1|0|1|1|1
GoldenDict (nonwill, qt5)|1|0|0|0|1|1
mdict pc(win7虚拟机、win10)|1|1|0|1|1|1|
GoldenDict(qt4)|1|0|0|0|1|1|
深蓝词典|1|1|1|1|1|1|
欧路(android)|1|0|0|0|1|1|
mdict(android)|1|1|0|1|1|1|

看来非a标签+id基本没问题。

PART 2 带entry的锚点跳转

在vim的提醒下增加了这一部分测试。

先上文件:Desktop.7z (1.9 KB)
其中两个HTML是为了测试Chrome设计的,作为对照。
结果以跳转到页面指定锚点为准,只能跳转到页面开头不算支持。

结果:

div+id a+id div+name a+name div+id+name a+id+name
Chrome(HTML) 1 1 0 1 1 1
GoldenDict (nonwill, qt5) 0 1 0 1 0 1
mdict pc(win7虚拟机、win10) 1 1 0 1 1 1
深蓝词典 1 1 1 1 1 1
欧路(android) 0 1 0 0 1 1
mdict(android) 1 1 1 1 1 1
GoldenDict(qt4) 0 0 0 0 0 0

这次对goldendict来说,div+id就不行了。更糟糕的是qt4版本全军覆没……
安卓版欧路跳转反应比另外两个软件慢了半拍。
综上,a+id是兼容性最好的办法,这也验证了vim的观点。

基本结论:兼容性最好的方式:

  • 页内跳转:div/span+id
  • 使用entry://跨页跳转:a+id
16 个赞

可否再测试一下 span + id?

我的实践:在Win 10GoldenDict (qt5) 中, span + id 是不可以的,但是a+id却是可以的。

span和div理应是一样的,阿弥陀佛的类语大辞典-适合GoldenDict.mdx就是span+id,他mdict测试跳转不了,但我这里可以。所以我只能说无法复现。

小结
代码方面,跨平台 div+id 的兼容性最好。
软件方面,深蓝词典对各种跳转方式支持度最好,可见开发者是很良心的。

3 个赞

GoldenDict 实际效果

链接源文件

目标 ID 源文件:使用的是 a + id。若更改为 span + id,则定位失效。

更多实际案例:

源文件发一下看

image
这个带entry的我没测试到,我测试的都是页内的锚点跳转

1 个赞

本页内或者跳到其他关键词的页内,都是如此。

Webster’s Third New International Dictionary Unabridged 有大量的链接跳转,我之前为这个问题大伤脑筋,后来才发现需要使用 a + id,而span 则不行。a + id 这种用法,与我所理解的HTML标准用法很不一样,有点怪怪的。

Browse Dictionary A-Z.zip (20.3 KB)

1 个赞

goldendict可以正确解析entry://链接,比如
image
转成


但是页内锚点就出问题。

那我的测试文件,target to red box.能跳转吗

测试文件, target to red box. 不能跳转。

估计我们之前的认识区别就在这里了,至少GoldenDict是这样,其他软件不清楚:

  • 加entry的链接,要使用a + id
  • 不加entry的链接,要使用span + id

我若只在GoldenDict中使用,那我就这样使用:
1、链接文件写:entry + id
2、目标文件写:a + id

建议重新设计测试案例,重新对比各词典的适配情况,这样实验就完美了。毕竟词条间的义项跳转是很实用的功能,时常能用到。

1 个赞

我已经加了一个词条测试entry://的跳转,等我测试完了再发,

1 个赞

name属性已经淘汰很久了,推荐用id
https://www.w3.org/TR/2011/WD-html-markup-20110525/a.html#a.attrs.name

1 个赞

主要是考虑到有些很老式的词典可能还在用name跳转的方法,所以放进来测试一下。

1 个赞

锚点只要由id就可以称为锚点了,目标是a也可以跳转。

现在这个实验完美了!赞!!

1 个赞

好帖留名,多谢

想在圖形的精確的位置前面加個 id 此法來定位卻定不了位
https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_target

可有辦法類此架構下定位於圖形的精確定位
如上圖 for and and 定不了位
https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_target![2020-09-05_195922|690x301](upload://lXskRJhZuEnovhSlg3zCCcEivrk.png)
只能透過 input type=“search” 來定位

可以,网页也是可以一层一层的

1 个赞

謝謝回覆,這個問題好擺了好久了,你的回答讓我突然想到可能是 css z index 沒有設置,因為 highlight 的文字層的優先權較高於圖片