javascript - 重置书签中的 CSS 属性

Question

我正在尝试附加新的 <div>通过书签添加一些内容的元素，并添加一些内联 CSS。

问题是来自主页的 CSS 通常也会影响这个 div。

什么是确保我的书签样式总是比任何父页面的样式更重要的首选方法？

最可靠的解决方案是为 div 中的每个元素设置所有可能的 CSS 属性。这是明智的吗？我在哪里可以获得列表？

我找到了 cleanstate.css这可能会进行重置。

也许某些 js 解决方案会更好？例如。检测主页应用了哪些样式，并将它们重置为默认值？无论如何，我都会在这个小书签中提供 jQuery。

Answer 1

可靠的解决方案是 iframe。

您可以动态创建它并使用 src 标记中的“javascript:”协议(protocol)分配内容。

var iframe = document.createElement('iframe');

iframe.src = "javascript:'<div> Yours Content </div>'";
document.body.appendChild(iframe);

或者您可以插入空的iframe，等待它加载并根据需要修改iframe文档。例如:

var iframe = document.createElement('iframe');

iframe.src = 'about:blank';
document.body.appendChild( iframe  );

iframe.onload = function() {
  iframe.contentWindow.document.body.innerHTML = '<div> Yours content </div>';
};

或者，您可以创建单独的 .html 页面并将其作为 iframe 插入。 <iframe src="http://example.com">虽然，您需要在某处托管页面，并且如果没有额外的脚本，文档将无法访问父页面。 ( .postMessage() )