动态更改网站图标：当 div 包裹头部时如何

Question

我发现 this solution 可以使用我的 Chrome 扩展名的 content.js (run_at: document_end) 中的代码更改网站图标：

(function() {
    var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
    link.type = 'image/x-icon';
    link.rel = 'shortcut icon';
    link.href = 'http://www.whosebug.com/favicon.ico';
    document.getElementsByTagName('head')[0].appendChild(link);
}());

上面的效果很好。

将整个文档包装在 div 中以稍后应用一些必要的自定义时会出现问题 CSS。

<html>
  <div id="allContent">
    <head></head>
    <body></body>
  </div>
</html>

在这种情况下，上面的第一个代码不会更改网站图标。我尝试将其最后一行更改为：

document.getElementById("allContent").getElementsByTagName('head')[0].appendChild(link);

虽然 link 被正确插入（在 <div id="allContent"> 内 <head> 的底部），但图标没有改变。

有人知道为什么吗？

Answer 1

<div> 在 <html> 和 <head> 之间无效。渲染引擎会解决它，但会出现奇怪的副作用，例如元属性（如 <link rel="icon" ... >）不可预测或被忽略。

动态更改网站图标：当 div 包裹头部时如何

Changing website favicon dynamically: how to when div wraps head

html

javascript

favicon

dom

google-chrome-extension