怎样注入一个 DOM 元素，不受继承的 CSS 的影响 ?

2018-05-29 11:19:39 +08:00
 wwjvtwoex

我正在做一个翻译单词的浏览器扩展，需要在任意网站上注入一个翻译窗口，要防止当前网站的 CSS 影响翻译窗口的外观，所以提出这个问题。

还有两个方案，都不理想

1 插入一个 iframe，不会受到当前网站 CSS 的影响

2 插入 一个自定义元素 <foo></foo>

4680 次点击
所在节点    JavaScript
23 条回复
fe619742721
2018-05-29 11:30:47 +08:00
important 不行么
xiaody
2018-05-29 11:33:06 +08:00
iframe 和自定义元素哪里不理想？
CSS 方案可以试试 https://www.w3.org/TR/css-cascade-3/#all-shorthand
yushiro
2018-05-29 11:37:40 +08:00
内联样式的优先级最高，自己先覆盖一遍呗
cccer
2018-05-29 11:40:24 +08:00
可以参考“划词翻译”这个插件，全部使用自定义元素。
https://chrome.google.com/webstore/detail/%E5%88%92%E8%AF%8D%E7%BF%BB%E8%AF%91/ikhdkkncnoglghljlkmcimlnlhkeamad
wwjvtwoex
2018-05-29 11:42:32 +08:00
@xiaody 这两个方案还没试过，目前想到的有：


1 iframe 涉及窗口间传递参数


2 自定义元素实现 <select> 之类的比较麻烦
banricho
2018-05-29 11:48:15 +08:00
把元素插到 </html> 后面，虽然不符合规范，但是浏览器基本都能识别
wwjvtwoex
2018-05-29 11:48:32 +08:00
@yushiro 问题是想偷个懒，不想全部覆盖，而且谁知道什么奇怪的网站改了一些非常规的值
wwjvtwoex
2018-05-29 11:55:17 +08:00
@banricho 刚试过，不行 Firefox/Chrome
doubleflower
2018-05-29 12:11:50 +08:00
以前扫了一遍 web components 相关时记得好象有这么个技术，好象叫 Shadow DOM，chrome 原生支持的
leega0
2018-05-29 12:19:16 +08:00
楼上给了你答案
wwjvtwoex
2018-05-29 12:19:22 +08:00
@xiaody 感谢，似乎 style="all:initial" 能用
milklee
2018-05-29 13:32:20 +08:00
之前我也为这个问题纠结了很久，还为此写过一篇文章 https://github.com/lmk123/blog/issues/32

我尝试过挨个重置 css 样式、Shadow DOM、全自定义元素、iframe 这四种方式，最后还是觉得 all 最好。
milklee
2018-05-29 13:41:40 +08:00
@banricho @wwjvtwoex 可以把元素插入到 </head> 和 <body> 之间，这样浏览器是可以识别的
banricho
2018-05-29 13:44:54 +08:00
@milklee #13 我的锅，</body> 之后也行
刚才没考虑清楚，这样其实只能避免从父级继承，但对于直接定义标签还是没办法...
确实 all 更好，学习了
wwjvtwoex
2018-05-29 14:23:58 +08:00
@milklee 但使用 “ all ”，注入元素只有外观不受影响，依然不能避免 js 事件处理 的影响，最终还得用 自定义元素。
banricho
2018-05-29 14:25:34 +08:00
@wwjvtwoex #15 JS 事件处理的意思是？
wwjvtwoex
2018-05-29 14:32:30 +08:00
@banricho 宿主页面可能对你的 click 事件有其他的处理方法
banricho
2018-05-29 14:43:17 +08:00
@wwjvtwoex #17 这种可以阻止冒泡解决吧。。。
wwjvtwoex
2018-05-29 14:58:32 +08:00
我没仔细考虑，对注入的元素，“阻止冒泡” 确实可以解决。
mg122
2018-05-29 15:32:26 +08:00
z-index 层和透明度

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/458592

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX