disabledなファビコン

ファビコンを状態によって変更する必要があったが、固定の2種類の切り替えに過ぎなかったのでJavaScriptでファビコンを参照しているlink要素のhref属性を書きかえるのは少し面倒くさいかなと思った。そこでdisabled属性を付けることでファビコンの参照が切れれば、操作しやすそうかなと試してみた。しかし現行のブラウザーではdisabled属性を付けても普通にファビコンへの参照と解釈するようだ。

Demo: Disabled Favicon

デモでは緑の○と赤の✕のファビコンを両方共指定し、後で定義した赤の✕のファビコンを参照しているlink要素にはdisabled属性を追加している。もしdisabled属性がファビコンの参照に影響を与えるのなら緑の○がファビコンとして表示されることになるが、そうはならず赤の✕がファビコンとして表示される。Chrome 41、Firefox 36、Internet Explorer 11のいずれもダメだった。

このアイディアはファビコンのURLをJavaScriptコードから排除したいという欲求に基づく。

<link class="favicon-ok" href="617-ok.ico" rel="icon">
<link class="favicon-no" disabled href="617-no.ico" rel="icon">

あらかじめHTMLにはこのように必要になるファビコンを列記しておき、必要な時にdisabled属性を追加・削除してやるだけにするというわけだ。

document.querySelector('.favicon-ok').setAttribute('disabled', true);
document.querySelector('.favicon-no').removeAttribute('disabled');

実際にはうまくいかないので、普通にJavaScriptでリソースURLを管理してやる必要がある。どうしてもリソースの管理をJavaScriptで行いたくないのならrel属性を書き換えてやるという方法もあるだろう。しかしdisabled属性のようなそのものずばりな属性を操作するより非直観的な嫌いがあるので、他人にはわかりづらいコードになるかもしれない。