Question

我尝试通过bookmarklet添加一些内容的新<div>元素并添加一些内联CSS。

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

确保来自bookmarklet的样式总是比任何父页面的样式更重要的首选方法是什么？

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

我发现cleanstate.css可能会重置。

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

Answer 1

可靠的解决方案是iframe。

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

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()）

重置bookmarklet中的CSS属性

1 个答案: