JavaScript：「return false;」で「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内容)が（もちろん１つ）開くはずでした。

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

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

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

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

return false;

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

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

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

少し試してみると、２つ表示されたウィンドウはたしかに「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」でなければ問題が発生しなかったのです。ちゃんと１ウィンドウだけ開きました。

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がかなり読みにくい（変数が１文字になっていたりするのと、１行にしてあったりで圧縮されてる）ので、ちょっと困ってしまいました。

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

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

参考メモ

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

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

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