GoldenDict++ CSS Isolate「词典的样式表隔离」©🚩🌱

辞书分享 双击取词 便携模式 音频引擎 播放动画 文章缓存 自动分组 阅读模式 问题帮助 划词设置 升级下载

在处理反馈问题时，发现学友在反馈附带的一份有道在线词典网站的python处理脚本中，使用了CSS来处理查询结果的网页内容，但并没有限定页面中的脚本行为 — 这应该是学友所反馈问题的肇因 ，导致页面中被动态嵌入了广告及统计代码以致被多次刷新，当然了，程序应有适应能力才能取得最大的兼容性。
以前鲜有注意到自定义的Web或程序类型词典的样式表问题，因为除测试外我几乎不用这种类似的词典，这份python脚本中的一大段CSS内容给了我一些好奇心 — 其中使用了词典的ID去甄别处理这个有道查询网页内容中的一些元素以隐藏无用元素和凸显有效内容。然而在用户的自定义脚本或程序中使用词典的ID并不容易也不省心，因为词典的ID并非是固定不变的 — 当需要在其它机器的GoldenDict++中部署同一脚本，或当该词典被删除并重新添加时，针对其所生成的ID是区别于先前的实例的 — 这使得脚本或程序中所定义的CSS对页面内容不再有效，用户不得不再去重新设定脚本或程序中的词典ID。

抛开使用GoldenDict++的内部词典ID机制，有效又方便的隔离样式表的方式可有如下两中 — 尽可能的将页面内容包括在一页面元素(div或span)内：

  1. 样式表需在词典间共享 — 使用伪类容器来包含所有的页面内容
  <div class="伪类名"> 词典查询结果 HTML 代码 </div>

  .伪类名 .页面元素伪类 { 样式属性; }
  .伪类名 #页面元素ID { 样式属性; }
  1. 样式表为词典内容独享 — 使用特定ID的容器来包裹页面内容
  <div id="元素ID名"> 词典查询结果 HTML 代码 </div>

  #元素ID名 .页面元素伪类 { 样式属性; }
  #元素ID名 #页面元素ID { 样式属性; }

只要作为标识符的元素ID或伪类名称唯一，即可有效的隔离对应的样式内容，其它格式词典包括离线词典的内容代码，即便是大部分网站的网页代码，隔离样式的方式最普遍也不过是这两种方式。至于这个标识符的唯一性，最丑陋但便捷的一种实现，可以使用当前时间生成一唯一的UUID，或者在其中直接黏入时间戳都可以。

以上方式可能未必会对所有的在线内容有效，特别是使用了内容保护技术的Web内容。以该有道脚本获取到的查询页面内容为例，其中包含站点统计和广告推广等相关js脚本的联网引用，这些功能脚本动态的改变了页面内容 — 显见的是向页面内动态插入了一堆iframe，引发的非预期行为影响到了GoldenDict++的运行。恶意脚本甚至会破坏程序的运行安全及功能一致性，因此，最有效的隔离CSS和JS的方法，需要在自定义脚本或程序内实现 — 当查询内容被提交给GoldenDict++时即为最终有效内容，无需再做隔离处理。