2015年04月23日

サイトのIE対応Adapted this site to IE

先日来サイトのリニューアル作業を行っていたわけだが、ようやく枠組みがほぼ完成したのである。 実はだいぶ前に完成していたつもりだったのだけど、最終確認で IEでの動作に多くの問題があったのだ。

トラブル1: 要素のidが取得できない

※ "item" は変数名として利用してはいけない(IEでは item()関数が実行される)

オブジェクトの id を取得するために

      item = $(this).attr('id');

と、コードを書いていたのだが、これが IE では正しく動作しなかった。

答えを言うと "item()" は javascript の関数であり、変数名として利用することはできない。 IE以外では問題なく動作しているものだから、気が付かなかった。

ちなみに $(this).attr('id') も、this.id でよい。わざわざややこしい書き方をしてしまった。

というわけで、下記で修正OK。

      name = this.id;

トラブル2: top.document アクセスで例外

※ クロスドメイン時の top.document アクセスの結果はブラウザによって異なる

クロスドメインかどうかを判定するのに、"top.document" へのアクセスが可能かどうかでチェックしていた。

      if(top.document==undefined || top.document==null) {
        // ここにクロスドメインの処理
      }

といった感じだ。 これも、IE以外では何の問題もなく動作していたのだが、IEでは動作しない。 どうやら、top.document へアクセスした瞬間に例外になっているようだ。

ならば、例外をキャッチしてやれば良いわけだが、IE以外では例外にならないのでひと工夫。

というわけで、下記で修正OK。

      try {
        if(top.document==undefined || top.document==null) throw "corss domain";
      } catch(e) {
        // ここにクロスドメインの処理
      }
いずれも IEが悪い、というわけではない。むしろ厳しいチェックご苦労さま、というくらいだ。

At last I've finished framework design of this site over hard working. Actually I thought it is finished but I found many trouble in IE when I tested.

Trouble 1: can't get id of object

※ Don't use "item" as variable name (evaluate item() function on IE)

I wrote as below to get id of object.

      item = $(this).attr('id');

But it can't perform correctlly in IE.

At first I say an answer that "item()" is a function of javascript, it can't be used as variable. I couldn't notice that because it performed perfectlly in other browsers.

Incidentally "$(this).attr('id')" is too complex. It can be wrote as "this.id"

That's why, the correct code is below.

      name = this.id;

Trouble 2: get exception on accessing top.document

※ access of "top.document" on cross-domain environment, you'll get different result on different browser.

I checked an access of "top.document" to judge in cross-domain environment or not. as below...

      if(top.document==undefined || top.document==null) {
        // Here is cross-domain
      }

It also perform uncorrectlly in IE in spite of other browsers are good. Evidently, it may rise an exception when access "top.document".

If it is then catching that exception is good technich. But the exception is not rased on other browser, then twist it a litte.

That's why, the correct code is below.

      try {
        if(top.document==undefined || top.document==null) throw "corss domain";
      } catch(e) {
        // Here is in cross-domain
      }


posted by tekniq at 15:36 | Comment(0) | 日記