innerHTMLでscript要素を追加したり、既に実行されたscript要素をcloneNodeでコピーしてそれを追加しても処理は実行されない。script要素を実行するには、createElementで新たにscript要素を作り、appendChildで追加する必要がある。
例えば、Ajaxなどでhtmlを書き換える時、同時にscript要素にある処理も実行したい場合、新たにscript要素を作ってそこに実行したい処理をコピーしなければいけない。そういう時に使えるスクリプトを書いた。
function cloneScript(element) { var script = document.createElement('script'); var attrs = element.attributes; for(var i = 0, len = attrs.length; i < len; i++) { var attr = attrs[i]; script.setAttribute(attr.name, attr.value); } script.innerHTML = element.innerHTML; return script; }
引数に指定されたscript要素の属性と処理内容をコピーした新しく作られたscript要素を返すので、src属性で外部jsファイルを指定しているscript要素や、script要素内に直接処理の書かれているscript要素どちらでも問題ないはず。
例えば以下のようなscript要素を再度実行する場合
<script class="origin">alert('hello');<script>
var origin = document.querySelector('.origin'); document.body.appendChild(cloneScript(origin)); //'hello'とalertが鳴る;
こんな感じで使える。