情報科学屋さんを目指す人のメモ

方法・手順・解説を書き残すブログ。私と同じことを繰り返さずに済むように。

JavaScript:「return false;」で「href」を無効化できずに2つウィンドウが開いてしまった原因

オリジナルのTwitterボタンを設置したところ、ウィンドウが2つ開いてしまうことに気が付きました。ちゃんと「return false;」を利用して、「aタグのhref」リンクが開かないようにしていたつもりが、効果がないようでした。かなり特殊だったこの原因を探すのにちょっと苦労したので、メモしておきます。

設置していたタグ

設置していたタグを簡単に書くとこんな感じです。

<a href="http://twitter.com/intent/tweet?text=Tweet内容" onClick="window.open(encodeURI(decodeURI(this.href)), 'tweetwindow', 'width=550, height=450, personalbar=0, toolbar=0, scrollbars=1, resizable=!'); return false;"><img ... /></a>

これをクリックすると、新しいWindowsに、Tweet画面(URL:twitter.com/intent/tweet?text=Tweet内容)が(もちろん1つ)開くはずでした。

なぜか2つ開いてしまったのです。

設置していたタグの仕組み

まず、「onClick」にある「window.open()」を使って、tweetページを別ウィンドウで開くようにしています

しかし、これだけだとjavascriptが使えない環境では困ります。そこで、hrefにもURLを入れておくことで、通常のaタグとして、リンクが機能するようになります。また、マウスカーソルをかざしたときにも、ちゃんとリンクのように振る舞ってくれます。

ただしこのままでは、javascriptが使える環境で「window.open()」でウィンドウが1つ開いた後に、「aタグのhref」の効果でもう1つウィンドウが開いてしまうのです

return false;

必ず「onclickの中身」→「href」の順番で動作するため、「onclick」の「window.open()」の続きに「return false;」を書いておくと、「return false;」のところで処理が終了してくれて、「href」にたどり着かなくなり、1つだけwindowが開くようになります。

なので、「window.open() + return false; + href」で上手くリンクとして動作するはずだったのです。

このように、2つウィンドウが開かないように「return false;」を設置したのにもかかわらず、なぜか2つウィンドウが開いてしまうのです

return false;が機能していない?

少し試してみると、2つ表示されたウィンドウはたしかに「window.open()」と「href」で指定されたURLを開いていました。つまり、「return false;」が機能していなかったのです

いろいろ試してみた結果

ここでいろいろ試しました。Chrome、Internet Explorer、Opera、Firefox、全てで問題が発生しました。

他のサイトに書いてあるHTMLをそのまま借りたとしても、なぜか自分のサイトでだけ上手く動作しないことに気が付きました。

WordPressプラグイン?

そこで、jQueryを使っているWordPressプラグインの影響ではないかとなんとなく思ったのですが、解決しませんでした。

www.yahoo.co.jpにしたら大丈夫!

さらにいろいろ試していたところ、なぜかURLをwww.yahoo.co.jpにしたら問題なく動作しました。衝撃です。

詳しく試してみれば、「twitter.com/intent/tweet」でなければ問題が発生しなかったのです。ちゃんと1ウィンドウだけ開きました。

twitterのjavascriptが原因?

すると、twitterにちなんだ部分が原因であるとしか考えられません。

さらに、「/intent/tweet」限定だったので、ChromeのDeveloper Toolsで原因を検索した結果、「フォローボタン」や「Tweetの埋め込み」に使われている「widgets.js」が原因だと分かりました

原因のコード

こうして、次のコードが「フォローボタン」などと一緒に設置されているときだけ、問題が発生するということがわかりました。

<script src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

でもこれどう対策すれば・・・

このコードを除去してしまえば確かに問題は発生しないのですが、そうするとTwitter純正の「フォローボタン」や「Tweet埋め込み」が使えなくなってしまいます。

さらにもっと細かく対処しようにも、widgets.jsがかなり読みにくい(変数が1文字になっていたりするのと、1行にしてあったりで圧縮されてる)ので、ちょっと困ってしまいました。

この難読化されたwidgets.jsをJavaScriptのコード整形&色付け(貼り付け用)で多少読みやすくしてみたところ、widgets.jsの9行目のaddEventListenerでclickに対して関数を設定しているようでしたが、これをどううまく回避すればいいかよくわかりませんでした。

対策

というわけで、「そもそも「href」を使うのは、JavaScriptが使えない人用なので、「href」が動作してしまう原因である「intent」の文字を使わないで、一番近いものを表現すればいいじゃないか、でもtwitterじゃないサイトに飛ばすのはおかしい」と考え、hrefの中身を「http://twitter.com/intent/tweet?...」から、「http://twitter.com」だけにしてしまいました。これでとりあえず2つ表示されてしまう問題は解決することができました。

参考メモ

たとえば、次のように書いていたコードは(これ単体では、変数部分が動作しません)、

<a class="button-twitter" href="http://twitter.com/intent/tweet?text=&quot;<?php echo $page_title; ?>&quot;&amp;url=<?php echo $page_url ?>" onclick="window.open(encodeURI(decodeURI(this.href)), 'tweetwindow', 'width=550, height=450, personalbar=0, toolbar=0, scrollbars=1, resizable=1' ); return false;" target="_blank"><img src="http://did2memo.net/wp-content/themes/elements-of-seo_1.4/images/button-twitter.png" alt="Twitterでつぶやく" width="240" height="70" /></a>

次のように修正しました。

<a class="button-twitter" href="http://twitter.com/" onclick="window.open(encodeURI(decodeURI('http://twitter.com/intent/tweet?text=&quot;<?php echo $page_title; ?>&quot;&amp;url=<?php echo $page_url ?>')), 'tweetwindow', 'width=550, height=450, personalbar=0, toolbar=0, scrollbars=1, resizable=1' ); return false;" target="_blank"><img src="http://did2memo.net/wp-content/themes/elements-of-seo_1.4/images/button-twitter.png" alt="Twitterでつぶやく" width="240" height="70" /></a>
			<a class="button-hatebu" href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo $page_url_encoded ?>&title=<?php echo $page_title_encoded ?>" target="_blank"><img src="http://did2memo.net/wp-content/themes/elements-of-seo_1.4/images/button-hatebu.png" alt="はてなブックマークする" width="240" height="70" /></a>

まぁ荒っぽいですが、2つ表示されるよりはマシかな、ということでこうしてみました。

コメント(1)

  1. Sozanaa
    2015年6月16日(火) 00:31

    http://helpmyscabies.com clozapine benztropine

新しいコメントを投稿