firefoxやsafariへの対応。

質問

firefoxやsafariへの対応。

http://www.perl-labo.org/gocount/2/
上記ページのJavascriptを利用したいのですが、
「ジャンプした回数はこちら。」のテスト用ページをクリックしても
firefoxではカウントされません。
safariではundefinedがカウントされています。
OperaとIEでは正常にカウントされています。

ソース上には、if (window.XMLHttpRequest) { // Safari, Firefox など
と記載されているので、safariやfirefoxにも対応していると思ったのですが、
別の部分のコードが対応していないのでしょうか？
Perlは簡単な改造程度は書けるのですが、JavaScriptはまったく知識がないので、
safariやfirefoxに対応させる為にはどの部分を変更すればいいのかがわかりません。
各ブラウザのバージョンは最新にして、テストしました。
対応方法をご存知の方、どうぞよろしくお願いいたします。

回答No.2

my-- · ベストアンサー

var all = document.all;
var el = document.activeElement;

all, activeElementプロパティが使われてますよね。
ブラウザによって差異があるようですから、これが原因ではないかと。

//var all = document.all;
var all = document.getElementsByTagName('a');
//var el = all(i);
var el = all[i];

//var el = document.activeElement;
var el = this;

こんな感じでどうだろか。

機能面の拡張なら別ですが、不具合という事ならここでやるより
サイト管理者と直接やり取りして修正してもらった方が
有益性は高いと思いますけど。あくまで個人的に。

お礼

ご回答有難うございます。
お教えいただいたコードで試したところ
自分がインストールしてる全てのブラウザで正常に動作することが確認出来ました。
自身でどれだけ勉強しても、ここまでたどり着くことは到底無理そうだったので
感謝・感激です！

回答No.4

fujillin

No1です。

すでにNo2様がご指摘になっていますが、ご提示のサイトの方法だと通信そのもの以外の部分にクロスブラウザでなさそうな記述がありますね。

もっというならば、その方法だとHTML内の各リンク要素にonclickイベントを設定するようになっていますので、もとのHTMLにonclickの設定（他の目的のために）されていたりする場合上書きされてしまうため、元の機能が失われてしまうことになります。（そのようなものが一切なければ問題ありませんが）
安全を期すのなら、ドキュメントレベルにクリックイベントを一つだけ設定して、リンク要素のクリックだったら送信するようなものにするほうが、手間も少なくなりますし賢明かと思います。（設定も、addEventListenerを用いるなどの方法で）

＞非同期通信にした場合は、どのような動作の違いがでるのでしょうか？
一般的には、同期していないのでサーバーからのレスポンスを監視していないと受け取った後の処理にかかれないと言う違いがあります。
コード上での違いは先ほどの回答の参考サイトにあるように、第3引数のfalse、trueの違いで書き分けています。

でも、ご質問のような使い方の場合だと、サーバ側のcgiをどのように作成しておくかにもよりますが、cgiから出力をしなければスクリプト側で受け取る必要がないので、送信しっぱなしでもよさそうな気がしますけれど…（そのままでよいのか、正確にはわかりません）

お礼

ご回答有難うございます。
my--様にお教えいただいたコードで解決出来ました。

非同期通信についても詳しくお教えくださり有難うございます。
大変勉強になりました。

JavaScriptは、環境によって動作しないこともあり、
昔から勉強するつもりがなかったのですが、
今回のような機能を含めて、かなり便利な機能を実装できることがわかりましたので、
今後は、javaScriptの勉強も始めてみようと思います。

回答No.3

yyr446

同期・非同期の違いとか、リクエストヘッダーのMIME指定
とか試して見ようとしてふと、思ったんですが

このサイトのJSの根本にある

var all = document.all;
var n = all.length;

ってFirefoxでももう大丈夫になったんでしたっけ？

お礼

有難うございます。
my--様にお教えいただいた方法で解決できました。

回答No.1

fujillin

ajax関連はよく知らないのですが…

方法は良く見かける方法なので、ちょっと調べてみました。
mozilla系の場合はこんな仕様みたいですね。
　https://developer.mozilla.org/ja/Using_XMLHttpRequest
　https://developer.mozilla.org/ja/XMLHttpRequest
ご提示のサイトではstatusのチェックを行なっていないところが違いますが、とりあえずは送信しっぱなしでも目的は果たしているので、ご提示のケースでは特に問題にはならないと思われますが…

似たようなテストサイトがありましたので、そちらでも試してみました。
　http://jsgt.org/ajax/ref/test/async/test1_1.htm
fx（safariは手元に無い）だと、同期通信の場合どうもうまくいっていないみたい・・・
このあたりが関係しているのかも？
　http://www.fraction.jp/log/archives/2005/03/216
（ご提示のサイトではgetなので、そのままは該当しませんけれど）

よく見かけるクロスブラウザの方法はこんな感じです。
　http://webos-goodies.jp/archives/50548720.html
　http://d.hatena.ne.jp/keyword/XMLHttpRequest
あまり自分で試したことがないのでわかってませんが、みな同様の結果になると思うのですが…

解決法の一つとしては、非同期通信にすれば（↑）のテストサイトでも大丈夫みたいですし、この方法は多くのサイトでも用いられていると思います。
他の方法としては、ajax用のライブラリを利用するとか。（prototypeやjqueryやExtJSなど）

お礼

有難うございます。
ページ内リンクがクリックされた時に、cgi（./history.cgi）にどのリンクがクリックされたかを知らせることが出来ればいいのですが、
質問スクリプトを非同期通信にした場合は、どのような動作の違いがでるのでしょうか？
また、非同期通信について今調べているのですが、JavaScriptにつていの知識がないので、
質問スクリプトをどのように書き換えれば非同期通信として動作させることができるか
わかりませんでした。お手数をおかけして恐縮ですが、
どのように書き換えればいいのか、お教えいただけると幸いです。