JavaScriptでiframe操作時にchromeで不具合がでるのを回避する

とあるスクリプトで javascriptでiframeを書き、そのフレームをさらに書き換える・・・というものがあるのですが、スクリプトをページ内に複数設置すると、chromeでエラーになってしまうので回避策。

今までは

document.write('<IFRAME id="フレーム名" name="フレーム名" ....></IFRAME>');

で描写して、ターゲットとなるiframeを

var target_iframe = frames[フレーム名];

で取得していたのですが、これが２度目以降の実行時にundefinedとなってしまう。

var target_iframe = document.getElementById(ifrname).contentWindow;

でもやはり取得できず。
他のブラウザでは問題ないので気が付かなかったのだけれど、chromeのみ症状が出た。

DOMでiframeを追加

解決策としてはDOMでiframeを追加する事で望んだ結果が得られた。

var iframe = document.createElement('IFRAME');
iframe.setAttribute('id', 'フレーム名');
iframe.setAttribute('name', 'フレーム名');
...
document.body.appendChild(iframe);

しかし、このままだと追加される位置がまずい。scriptタグの直後にiframeを追加したい。でも、scriptタグ自身にはidも何も付けていない。さぁ困った。

自分自身の要素(HTMLScriptElement)を取得する

参考： とてもシンプルに自分自身が属する script 要素を取得 - IT戦記

こちらの記事で非常に助かった。

実行中のscriptタグ自身の要素取得する。

var currentScript = (function (e) { if(e.nodeName.toLowerCase() == 'script') return e; return arguments.callee(e.lastChild) })(document);

注意点としては 要素を取得する前に document.write を使うな、という事。
「とてもシンプルに自分自身が属する script 要素を取得」の注意点 - 空繰再繰

これで、currentScriptにscriptの要素が取得できるので

currentScript.parentNode.insertBefore(iframe, currentScript.nextSibling);

で直後に追加することが出来た。