如何移除第三方JS widget注入的无ID匿名<style>样式块？

核心思路是遍历页面中所有style标签，匹配到包含目标widget专属类名（.widget-form）的标签后直接删除即可，以下是不同场景的实现代码：

原生JavaScript实现 #

方案1：等待widget加载完成后删除 #

优先监听widget自身script的加载完成事件，执行效率更高：

const widgetScript = document.querySelector('script[src*="formWidget.js?id=1234"]');
widgetScript.addEventListener('load', () => {
  document.querySelectorAll('style').forEach(styleEl => {
    // 可根据实际注入样式的特征调整匹配规则，避免误删
    if (styleEl.textContent.includes('.widget-form')) {
      styleEl.remove();
    }
  });
});

如果无法精准监听widget加载时机，也可以监听页面整体加载完成事件：

window.addEventListener('load', () => {
  document.querySelectorAll('style').forEach(styleEl => {
    if (styleEl.textContent.includes('.widget-form')) {
      styleEl.remove();
    }
  });
});

方案2：动态监听DOM插入自动删除 #

如果widget是异步延迟加载的，可以用MutationObserver监听DOM变化，匹配到目标style标签时自动删除，无需手动判断加载时机：

const styleObserver = new MutationObserver((mutations) => {
  mutations.forEach(item => {
    item.addedNodes.forEach(node => {
      if (node.tagName === 'STYLE' && node.textContent.includes('.widget-form')) {
        node.remove();
        // 删除完成后停止监听，减少性能消耗
        styleObserver.disconnect();
      }
    })
  })
})
// 监听全局DOM的子节点变化
styleObserver.observe(document.documentElement, {
  childList: true,
  subtree: true
})

jQuery实现 #

如果项目已经引入jQuery，可以用更简洁的写法：

// 页面加载完成后执行
$(window).on('load', function() {
  $('style').filter(function() {
    return $(this).text().indexOf('.widget-form') > -1
  }).remove()
})

注意事项 #

如果页面存在多个包含.widget-form的自定义样式，可以把匹配规则写得更精准，比如同时匹配注入样式里的特有规则（如border: 1px solid red、background: green），避免误删自己写的合法样式。

内容的提问来源于stack exchange，提问作者indextwo