lazyloadでiframeの遅延読み込みをした時にブラウザの履歴が増えてしまうのをなんとかする

lazyloadとは

画像ファイルやiframeなどを非同期で読み込むテクニックです。WEBページが表示されるタイミングで重たい画像や動画ファイルを読み込むのではなく、スクロールして表示されるタイミングでファイルを読み込むことができるようになります。WEBページの初回表示を早めることができるため、ユーザーにとっては良い体験に繋がると思います。

有志によりjavascriptのライブラリとして提供されており、誰でも簡単に利用することができます。

verlok/lazyload

iframe読み込み時における履歴の増加

あるサイトを構築し、画面内にFacebookやTwitterのiframeプラグインを表示し遅延読み込みをしていました。サイトを利用していると何度もブラウザバックボタンを押しているのになかなか戻らないことがあるという現象に何度か遭遇しました。

調べてみると、iframeを読み込んだ際にブラウザの履歴が現在の画面のURLで増えていました。

1つの画面内にiframeが2つあったなら、そのページの履歴は3つ作成されてしまい、前の画面に戻ろうとすると3回もブラウザバックをしなければならない状態でした…

iframe.contentDocument.location.replace

iframeの読み込み時に問題があるとわかっていたので、読み込み時になにかしらの細工ができれば履歴を残さずに表示ができるのではと考えました。

そこで辿り着いたのが、「location.replace()」です。

Location.replace() ・・・ ブラウザに履歴を残さず、ページのURLを指定されたURLに置き換えます

iframe読み込み時に、この関数を使用することができればブラウザの履歴にURLを残さずにiframeを表示することができます。

iframeの読み込み時に細工する

iframeの読み込み時に動作を変えることのできるライブラリ、つまり動作時にcallbackで任意の処理を実行できるライブラリを探します。

verlok/lazyload

先ほど冒頭でも紹介しましたが、こちらのライブラリであれば、要素が読み込まれるタイミングや読み込み後、エラーが発生したタイミングなどでcallbackを指定することができます。

この処理を利用して読み込み時に任意の処理を動作させます。

実際のコード

実際のコードは下記です。

<iframe src="dummy.gif" data-url="//example.com" class="lazy"></iframe>
<script>
var lazyLoadInstance = new LazyLoad({
    callback_enter: function(el){
	var url = el.getAttribute("data-url");
        if(url != null){
            el.contentWindow.location.replace(url);
	}
    }
});
</script>

iframeにclass="lazy"を指定すれば、遅延読み込みが動作しますが、通常の読み込み先である「data-src」属性がないため、なにも読み込まれません。

ただし、読み込み時にcallback_enterを呼び出します。このメソッド内で同じタグ内の別属性「data-url」のURLを読み込み、contentWindow.location.replace(url)で表示してやります。

こうすることで、履歴を汚すことなく読み込むことができます。

まとめ

lazyloadのライブラリを使用した、iframe遅延読み込み時において、ブラウザの履歴を残さない方法を紹介しました。

lazyloadは今後専用のタグを記述することでJSのライブラリなどを使用することなく動作するようになりますが、細かな動作の指定が必要なときはcallbackなども利用して調整してみてください。