css - 防止 iFrame 被 JavaScript 定位并应用内联样式？

Question

我正在制作一个 Chrome 扩展程序，它将 iframe 插入页面并将我自己的样式应用于它:

const iframe = document.createElement('iframe');
iframe.style.background = 'white';
iframe.style.position = 'fixed';
iframe.style.width = '300px;
iframe.style.height = '50%';
iframe.style.top = '0';
iframe.style.zIndex = '999';
iframe.frameBorder = 'none';
document.documentElement.appendChild(iframe);

大多数情况下这工作正常，但有一些网站使用 JavaScript 定位 iframe 并应用一些内联 CSS，这会弄乱布局。 https://exchange.adobe.com/creativecloud.html?zpluginId=12557&mv=product&mv2=accc当您调整浏览器大小时执行此操作。
有没有办法解决？我尝试将内联样式设置为 !important但它有影响。

Answer 1

一、解决方案
您可以使用 css 属性 all
在您的情况下，它看起来像这样:

const iframe = document.createElement('iframe');
iframe.style.all = 'unset'; // maybe also add `! important`
// ...
document.documentElement.appendChild(iframe);

2. 解决方案
如果您想确保您的样式属性不会被更改。你可以用 MutationObserver 来完成它

const iframe = document.createElement('iframe');
iframe.style.all = 'unset'; // maybe also add `! important`
// ...
document.documentElement.appendChild(iframe);

const observer = new MutationObserver((event) => {
  // check if styles differ from your initial ones
  // fix them if necessary
});

observer.observe(iframe, {
  attributes: true, 
  attributeFilter: ['style'],
  childList: false, 
  characterData: false
});

这是一种蛮力。但肯定会起作用。