twitter-bootstrap - 在书签中使用 twitter bootstrap - CSS 影响页面的其余部分

Question

我将 Twitter Bootstrap 注入到我正在制作的书签中，但 CSS 覆盖了页面上现有的样式表。我只想将它应用于小书签生成的标记。这是可能吗？如果是这样，我该如何完成它？

Answer 1

让小书签创建自己的<object>，然后将 Bootstrap 和标记注入到它的data属性中data URI：

void
( 
  function disable_and_replace_bootstrap() 
    { 
    "use strict"; 
      
    var css_markup = '<link rel="stylesheet" type="text/css" href="https://getbootstrap.com/dist/css/bootstrap.min.css"/>'; 
    var bootstrap_markup = "<h1 class='h6'>Hi</h1><h6 class='h1'>Bye</h6>";
    var newobj = document.createElement("object");
          
    newobj.setAttribute("width", "100px");
    newobj.setAttribute("height", "100px");
    document.body.innerHTML = bootstrap_markup;
          
    newobj.setAttribute("data", "data:text/html,"+css_markup+bootstrap_markup);
    document.body.appendChild(newobj);
      
    }() 
)

参考

• 在现代浏览器中，JavaScript 小书签是否有任何安全限制？

• 如何为您的 Web 应用程序制作书签

• 使用 Firebug lite 小书签调试基于 Web 的 iPad / iPhone 应用程序

• 移动性能书签

• Mozilla 错误 530308 - 禁止<object data="javascript:...">XSS 预防

• 动态样式 - 使用 JavaScript 操作 CSS

• 支持的 HTML

Answer 2

您必须更改 css 以仅应用于您的书签。因为 bootstrap css 是从较少的文件编译的，所以您可以轻松地对其进行修改和编译。