V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
wwjvtwoex
V2EX  ›  JavaScript

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

  •  1
     
  •   wwjvtwoex · 2018-05-29 11:19:39 +08:00 · 4645 次点击
    这是一个创建于 2130 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    还有两个方案,都不理想

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

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

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


    1 iframe 涉及窗口间传递参数


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

    我尝试过挨个重置 css 样式、Shadow DOM、全自定义元素、iframe 这四种方式,最后还是觉得 all 最好。
    milklee
        13
    milklee  
       2018-05-29 13:41:40 +08:00
    @banricho @wwjvtwoex 可以把元素插入到 </head> 和 <body> 之间,这样浏览器是可以识别的
    banricho
        14
    banricho  
       2018-05-29 13:44:54 +08:00
    @milklee #13 我的锅,</body> 之后也行
    刚才没考虑清楚,这样其实只能避免从父级继承,但对于直接定义标签还是没办法...
    确实 all 更好,学习了
    wwjvtwoex
        15
    wwjvtwoex  
    OP
       2018-05-29 14:23:58 +08:00
    @milklee 但使用 “ all ”,注入元素只有外观不受影响,依然不能避免 js 事件处理 的影响,最终还得用 自定义元素。
    banricho
        16
    banricho  
       2018-05-29 14:25:34 +08:00
    @wwjvtwoex #15 JS 事件处理的意思是?
    wwjvtwoex
        17
    wwjvtwoex  
    OP
       2018-05-29 14:32:30 +08:00
    @banricho 宿主页面可能对你的 click 事件有其他的处理方法
    banricho
        18
    banricho  
       2018-05-29 14:43:17 +08:00
    @wwjvtwoex #17 这种可以阻止冒泡解决吧。。。
    wwjvtwoex
        19
    wwjvtwoex  
    OP
       2018-05-29 14:58:32 +08:00
    我没仔细考虑,对注入的元素,“阻止冒泡” 确实可以解决。
    mg122
        20
    mg122  
       2018-05-29 15:32:26 +08:00   ❤️ 1
    z-index 层和透明度
    chenyu8674
        21
    chenyu8674  
       2018-05-29 15:39:37 +08:00   ❤️ 1
    用 canvas 画一个 [doge]
    gxm44
        22
    gxm44  
       2018-05-29 15:52:47 +08:00   ❤️ 1
    shadow dom
    codehz
        23
    codehz  
       2018-05-29 23:40:43 +08:00
    把源站放 iframe 里(
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5476 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 49ms · UTC 08:54 · PVG 16:54 · LAX 01:54 · JFK 04:54
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.