webkit系のブラウザで不具合が確認できたのだけれど、どうやらgetElementById()でnullが帰っている様子。

ググってみると同じような現象で悩んでいる人もいるみたい。DOM構築前だとnullが帰る事もあるのが原因のようだ。

onLoadイベントとかはjQuery使っているのなら簡単に実装できるのだけれど、純粋JSで書いているスクリプトだし、他所様に配信するスクリプトなので解決方法を探る。

jQuery使っているのなら、$.ready(function(){…}) でいいのだろうけど、そうはいかない。じゃあ、onLoadイベントに登録すればいい。いいのだけど、onLoadイベントは１つしか実行できないので工夫が必要になる。

ここら辺の記事を参考に How to use multiple window.onload events with external scripts – Javascript FAQ – Tek-Tips にある addOnloadEvent を組み込んで対処する。

処理的には document.write() でかいたHTML中にあるIDが付いたタグの中に別処理で作成したHTMLを放り込むもの。

実行したい関数には引数を指定しているので、
addOnloadEvent(function(){ print_image(hoge,fuga) });
みたいな感じにすればonLoadイベントとして実行してくれる。

そうすることで、getElementById()でnullが帰らなくなる。

今までは

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);

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

この両者のスクリプトを合わせてみた。
ライブラリを使いたくない（or使えない）状況で役に立つかも。
ちなみに「IEの6,7,8を判別するJavascript」のコードは間違っていたので少々修正。

if (typeof document.body.style.maxHeight != "undefined") {
    if (!/*@cc_on!@*/false){
        // Not IE.
        alert('Not IE.');
    }else if (document.documentMode >=8) {
        // IE8
        alert('IE8');
    }else {
        //IE7, IE8（IE7 mode)
        alert('IE7, IE8（IE7 mode)');
    }
} else {
    // IE6, older browsers
    alert(' IE6, older browsers');
}

Windows XP の IE8、IE7、FireFox、Chromeで確認OK.
Mac の Safari、FireFox、Opera、Chrome でもOK.

IEでのgetAttribute,setAttributeのバグ

// NG
element.getAttribute("class");
element.setAttribute("style", "background-color: #fff; color: #000;");
element.setAttribute("onclick", "clickHandler(event);");

// OK
element.getAttribute("className");
element.style.cssText = "background-color: #fff; color: #000;";
element.setAttribute("onclick", new Function("clickHandler(event);"));

IEでsetAttribute()とremoveAttribute()がうまく動かない問題 (ウップス!!なかわけ)

しかも、かなり重要なことを発見しました。

属性名を小文字で書かないとうまく動かない！！（IE7で確認）

setAttribute("onClick", new Function(""));

ではダメなのです。うまく処理されません。

setAttribute("onclick", new Function(""));

あー、これも引っかかってたわ。

ただし、上記の対応をすると他のブラウザで動かない。IE8 でもエラーが出る。IE 7以下用に振り分けないとダメなのか。。。

まぁ、そろそろIE7以下は捨ててもいいよ・・・ね？

結局

ベタにHTMLを document.write() で書けばいい訳で・・。
クロスブラウザにするには手間ががかかる・・。

ログインページ等でSSLのみのアクセスにしたいページがある場合、リンクをhttpsから始まるURL にしなくてはならないのでちょっと面倒。

仮想パス(../aaa/bbb/ccc.html)やフルパス(/aaa/bbb.html)で既にサイトを公開している場合には、どこかしらで修正を見逃す場合もある。

それならhttp でアクセスされた場合はhttps へ移動させればよさそう。
head内とかに以下のJavascript を設置するだけでOK.

<script><!-- change ssl protocol
  if (document.location.protocol==="http:")
  {location.replace('https://'+window.location.host+window.location.pathname);}
//--></script>

今までのパスを変更しないで済むので多少楽・・・かな。

javascriptでURLクエリで、変数を受け取ることはできないでしょうか？
http://q.hatena.ne.jp/1179844292

<script src=”sample.js?key1=value1&key2=value2″></script>

などでクエリー（Javascriptではそう呼ばない？？）を取得する。
注意点としては日本語等マルチバイトの文字をvalueにセットするには、URLエンコードしないとだめかも。
（呼び出し元のHTMLがUTF-8だとうまくいったけど。。。）

var getQueryStrings = function (){

    // scriptタグからリクエストされたURIを取得し、クエリー(?以降の部分)を抜き出す
    var script = document.getElementsByTagName( 'script' );
    var request = script[script.length-1].src;
    var query =( request.match(/\?(.+)$/) )[1]; //配列に代入されるため[1]の要素を代入

    //
    var pairs = query.split(/&/);
    var form={};
    for (var i in pairs){
        var val = pairs[i].split(/=/);
        form[decodeURI(val[0])] = decodeURI(val[1]);
    }
return form;
};

使い方は
var form = getQueryStrings();
とするとform にハッシュとして代入される。

form["key1"]やform["key2"]のように。
だいたい form.key1 form.key2 でも大丈夫だと思うけど、key1が数字の場合うまくいかないので注意。
例）sample.js?1=val1&2=val2

なんでこんな事するのかというと、以前はCGIでJavascriptを書き出していたので perl.cgi?k=aaa&〜 と、していた。そのスクリプトをJavascriptとして置き換えるのにURIの変更を（ほぼ）せずに行いたかったので。
こうしないとパラメーターを渡すのにscriptタグの変更が必要なので。

JSON(JSONP)で

name(
    {
      'data' :[
                    ['あいう','せそ'],
                    ['かきく','けこ'],
                    ['さしす','せそ']
              ]
    }
);

こんな感じのものを使おうとすると
‘]’がありませんというようなエラーが出る。

cgi等スクリプトで出力する場合はレスポンスヘッダを明示的に指定する必要がある。

perlなら

print “Content-type: application/json; charset=UTF-8;\n\n”;

のように。

charsetは’utf8‘ではダメで’UTF-8‘か’utf-8‘とハイフンが必要のようだ。

Content-typeも application/json とするのが良いらしい。

参考：

• jQueryの $.getJSON 等を使った Ajax でIEが動作しない件
  http://feedtailor.jp/oishi/2007/07/jquery_getjson_ajax_ie.html
• IE+Jsonではまった
  http://d.hatena.ne.jp/khiker/20081026/javascript_json
• jQueryでもはまるクロスブラウザ問題まとめ
  http://labs.s-cubism.com/blog/2008/11/10/53/

追記：

どうやら呼び出す時に<script>タグで指定すれば（静的ファイルでも）動作する模様。
動的に育成しない場合はレスポンスヘッダの付加は難しいし使えるかも。

例）<script type=”text/javascript” src=”../json.js” charset=”utf-8″></script>

この場合、type は text/javascript でのみ動作した。(win XP,IE8)
application/json や application/javascript では動作しなかった。

]]> http://perl.no-tubo.net/2009/08/24/jsonp%e3%81%aeie%e5%af%be%e5%bf%9c-utf8%e3%81%a7%e5%8b%95%e3%81%8b%e3%81%aa%e3%81%84%e4%bb%b6/feed/ 0