hashchangeとfancyboxでブラウザバックがうまくいかない

ブラウザバック対応でjsでhashchangeイベントを使用しいている場合で、fancyboxのiframeを併用していると思うようにブラウザバックが行われないケースがある。

fancyboxはモーダル表示するjsのライブラリです。

原因

原因は、fancyboxで表示したモーダルを閉じた時に、ブラウザの履歴が記録されてしまうため。

fancyboxを閉じるときに、$.fancybox.close()が実行されているのだが、そのときにiframeのsrcを変更している箇所がある。
なんと、iframeのsrcを変更すると、ブラウザの履歴が記録されてしまう。同じハッシュで・・・

そのため、fancyboxを閉じた後にブラウザバックすると、ハッシュは変わらないのに1つ前のリクエストに戻ろうとするので、おかしな動作になる。ブラウザによっては起こらないみたいだが・・・firefox、chromeはダメだった。

対応

いろいろ試した結果、fancyboxのライブラリを修正することに。

jquery.fancybox-1.3.4.js 945行目あたりの$fancybox.closeファンクションの中

元のソース

content.find('iframe').attr('src', isIE6 && /^https/i.test(window.location.href || '') ? 'javascript:void(false)' : 'about:blank');

修正後のソース

if (isIE6 && /^https/i.test(window.location.href || '')) {
content.find('iframe').attr('src', 'javascript:void(false)');
} else {
if (content.find('iframe')[0]) {
content.find('iframe')[0].contentWindow.location.replace('about:blank');
}
}

修正する場合は、自己責任で要確認してください。