在IE和Cross Browser中为书签注入CSS文件

Injecting a CSS file for a bookmarklet in IE & Cross Browser

本文关键字：书签 注入 CSS 文件 IE Cross Browser      更新时间：2023-09-26

我有以下JS代码，该代码将带有属性和href的链接标签注入页面头部，此代码适用于除Internet Explorer以外的所有浏览器。 

var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.id = '_mgc_css';
document.getElementsByTagName("head")[0].appendChild(link);
link.href = url + "css/bookmarklet.css";

似乎存在的问题是，当注入新工作表时，IE不会刷新页面上的样式。我已经尝试了IE的createStylesheet（）方法，但这似乎也不起作用。

关于我可以尝试让它跨浏览器的任何想法或建议？

在IE8 +中尝试此操作应该可以工作。

var headHTML = document.getElementsByTagName('head')[0].innerHTML;
headHTML    += '<link type="text/css" rel="stylesheet" href="+url + "css/bookmarklet.css"+">';
document.getElementsByTagName('head')[0].innerHTML = headHTML;

编辑：或像这样

var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href = url + "css/bookmarklet.css";
cssNode.title = 'title_goes_here';
document.getElementsByTagName("head")[0].appendChild(cssNode);

只需更改代码行位置 

var url = "location/"
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.id = '_mgc_css';
link.href = url + "css/bookmarklet.css";
document.getElementsByTagName("head")[0].appendChild(link);
相关文章：