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

  • LINEで送る

ブラウザバック対応で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');
	}
}

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

SNSでもご購読できます。

コメントを残す

*

CAPTCHA