IE7以前では、DOMのsetAttribute
にひと工夫が必要
クライアントスクリプトで動作するリンクやボタンを実装する場合、HTMLに直接
<button type="button" onclick="関数名とか">何かのボタン</button>
などと書いてしまうと、スクリプトが無効な環境では「押しても何も起きない」という悲しい現象になってしまいます。このような場合、オブジェクト自体をスクリプトで書き出すようにすれば、動作しないリンクやボタンが表示されるというマヌケな事態を避けることができます。
- もっとも、スクリプト無効環境で非表示にしてしまうことにより、スクリプトを有効にした場合にどんなメリットがあるかを知るのが難しくなるので、別途
noscript
要素を使うなどして説明を書いておくとよいかと思います。
というわけで、JavaScriptを使ってボタンを書き出してみます。
var button = document.createElement("button");
button.setAttribute("type", "button");
button.setAttribute("onclick", "関数名とか");
var buttonText = document.createTextNode("何かのボタン");
button.appendChild(buttonText);
var buttonOutput = document.getElementById("書き出したいHTML要素のID");
buttonOutput.appendChild(button);
ところがIE7以下だと、スクリプトを有効にすればボタン自体は表示されるものの、onclick
属性で指定した関数が実行されません。いろいろ調べてみたところ、やはりIEの実装によるもののようで。
ただし、new Function
〜の方法を採ると、今度はIE8やFirefox、Safariで動作しなくなってしまいます。(Operaは両方いけるようです。)