カテゴリー : JavaScript

[JavaScript] iframe で読み込み完了後に処理を実行するには onload イベントを使おう

iframe 内のコンテンツの読み込みが完了したら何か処理をさせたい場合 onload イベントを使うことで実現できます。

例えば以下のコードは、インラインフレーム内で frame.html の読み込み完了後に alert(‘complete’); という JavaScript の処理を実行しています。

<iframe src="frame.html" onload="alert('complete');">

(例) iframe 内のリンクをクリック禁止にする

もう少し具体的なテーマとして iframe 内のリンクをクリック禁止にする処理の実装について考えてみました。

onload を利用して以下のようなコードになります。

HTML

<iframe id="js-iframe" src="frame.html" onload="replaceIframeHref();">

JavaScript

window.replaceIframeHref = function(){
  $("#js-iframe").contents().find("a").each(function(){
    $(this).attr("href", "javascript:void(0);");
  });
};

以上です。

moment-timezone のバージョンが古くてサマータイムの切り替わりで日付処理がバグった

Moment Timezone の古いバージョンを使っていて、先日のサマータイムの終了日時 2016年11月6日(日)02時00分 PDT を境目に UTC から PDT/PST への変換がバグってしまう問題にぶち当たった。

結果的には、使っていた moment-timezone のバージョンが古かったので、バージョンを最新にしたことで解決しました。

moment-timezone@0.0.3 を使った場合

超古いバージョン 0.0.3 を利用した場合、タイムゾーン America/Los_Angeles で 2016-11-07 のその日の終わりの日時を正しく取得することができません。

> var now = new Date("2016-11-09 17:30:00")
> var moment = require("moment-timezone")
 
> moment(now).tz("America/Los_Angeles").endOf("day").utc().format('YYYY-MM-DD HH:mm:ss')
'2016-11-10 07:59:59'
> moment(now).subtract(1, "days").tz("America/Los_Angeles").endOf("day").utc().format('YYYY-MM-DD HH:mm:ss')
'2016-11-09 07:59:59'
> moment(now).subtract(2, "days").tz("America/Los_Angeles").endOf("day").utc().format('YYYY-MM-DD HH:mm:ss')
'2016-11-08 07:59:59'
> moment(now).subtract(3, "days").tz("America/Los_Angeles").endOf("day").utc().format('YYYY-MM-DD HH:mm:ss')
'2016-11-06 07:59:59'
> moment(now).subtract(4, "days").tz("America/Los_Angeles").endOf("day").utc().format('YYYY-MM-DD HH:mm:ss')
'2016-11-06 06:59:59'
> moment(now).subtract(5, "days").tz("America/Los_Angeles").endOf("day").utc().format('YYYY-MM-DD HH:mm:ss')
'2016-11-05 06:59:59'

moment-timezone@0.5.9 を使った場合

最新バージョン 0.5.9 を利用した場合、2016-11-07 07:59:59 というように 2016-11-07 のその日の終わりの日時を正しく取得することができています。

> var now = new Date("2016-11-09 17:30:00")
> var moment = require("moment-timezone")
 
> moment(now).subtract(1, "days").tz("America/Los_Angeles").endOf("day").utc().format('YYYY-MM-DD HH:mm:ss')
'2016-11-09 07:59:59'
> moment(now).subtract(2, "days").tz("America/Los_Angeles").endOf("day").utc().format('YYYY-MM-DD HH:mm:ss')
'2016-11-08 07:59:59'
> moment(now).subtract(3, "days").tz("America/Los_Angeles").endOf("day").utc().format('YYYY-MM-DD HH:mm:ss')
'2016-11-07 07:59:59'
> moment(now).subtract(4, "days").tz("America/Los_Angeles").endOf("day").utc().format('YYYY-MM-DD HH:mm:ss')
'2016-11-06 06:59:59'
> moment(now).subtract(5, "days").tz("America/Los_Angeles").endOf("day").utc().format('YYYY-MM-DD HH:mm:ss')
'2016-11-05 06:59:59'

moment-timezone は定期的に最新バージョンにアップデートしないと

moment-timezone は IANA Time Zone Database + Moment.js なライブラリなので、IANA Time Zone データベースを最新に更新するためにもバージョンのアップデートは定期的にしないといけませんね。

海外向けサービスを開発しているので、定期的にタイムゾーンに苦しんでいる気がする・・・。

[jQuery] カルーセルライブラリ slick.js の lazyLoad オプションを理解する

jQuery のカルーセルライブラリ slick.js をそのまま使うと slick.js file の読み込みと .slick() method の実行が完了するまで、カルーセルのレイアウトにならず ul/li タグで囲んでいる画像が全て表示されてしまうという問題に直面しました。

これを解決するには 1 枚目の画像だけ src で画像 URL を指定します。

<img src="http://example.com/image1.png">

2 枚目以降は data-lazy attribute に image url を指定します。

<img data-lazy="http://example.com/image2.png">

そして .slick() method に lazyLoad オプションを設定してあげれば OK です。

$('#js-banner-area').slick({
  lazyLoad: 'progressive'
});

Lazy Loading のサンプルは slick – the last carousel you'll ever need に載っています。

ちなみに lazyLoad オプションは ondemand と progressive の 2 つの設定があります。挙動の違いは Stack Overflow に詳しく説明されている投稿があったので引用しておきます。

ondemand: Loads the visible image as soon as the page is displayed and the other ones only when they’re displayed. (“[…] loads slides on demand. When a slide becomes visible (or on the before slide callback) the load is fired.”) Should be used if the other images of the carousel are displayed very rarely.

progressive: Loads the visible image as soon as the page is displayed and the other ones after everything else is loaded in the background (“loads the visible slides on init, and then progressively loads the rest of the slides on window.load().”). Should be used if the other images will be used most (or all) of the times the page is displayed.

デフォルトは画像が表示されるタイミングで load 処理が動く ondemand ですが、個人的には background で画像を load しておいてくれる progressive オプションを使うのが好みです。

lazyLoad オプションに設定値はカルーセルで 2 枚目以降の画像が表示される頻度で ondemand を使うか progressive を使うかを決めるとよさそうですね。


参考情報

[JavaScript] Date.now と new Date().getTime() と +new Date のパフォーマンス比較

JavaScript の Date.now と new Date().getTime() と +new Date の実行時間を jsPerf で確認してみました。

date-now-vs-new-date-gettime

結果は Date.now が最速でした。

Date.now を使いましょう!

[Handlebars.js] registerHelper で独自のヘルパーメソッドを登録する

Handlebars.js は registerHelper を使って、独自のヘルパーメソッドを登録することができます。

例えば、テンプレートで encodeURIComponent メソッドを使いたいときは、

Handlebars.registerHelper('encodeURIComponent', encodeURIComponent);

という風にヘルパーを登録して、

<p>{{encodeURIComponent 'http://tryhandlebarsjs.com/'}}</p>

とテンプレートに書けば、

<p>http%3A%2F%2Ftryhandlebarsjs.com%2F</p>

というような HTML が出力されます。

ヘルパーが不要になったら、

Handlebars.unregisterHelper('encodeURIComponent');

で割り当て解除できます。


参考情報