ブラウザウィンドウを確認する

Question

Observableでブラウザウィンドウを観察する方法はありますか？たとえば、rxJSまたは類似のものを使用します。私はブラウザーウィンドウが再スケーリングされるたびにアクションをトリガーしたいと思います。

Answer 1

私が正しく理解していれば、windowのresizeイベントを観察する必要があります。 RxJSではかなりシンプルです：

Rx.Observable 
    .fromEvent(window, 'resize') 
    .subscribe(event => { 
    // output new window width and height 
    console.log(window.innerWidth, window.innerHeight) 
    // or 
    console.log(event.target.innerWidth, event.target.innerHeight) 
    }) 

Answer 2

ResizeObserverという新しいプリミティブがあります。それは、変化の原因とは無関係に、観測された要素のサイズの変化に反応します。

このスニペットはGoogleのDevのブログからです：

var ro = new ResizeObserver(entries => { 
    for (let entry of entries) { 
    const cr = entry.contentRect; 
    console.log('Element:', entry.target); 
    console.log(`Element size: ${cr.width}px x ${cr.height}px`); 
    console.log(`Element padding: ${cr.top}px ; ${cr.left}px`); 
    } 
}); 

// Observe one or multiple elements 
ro.observe(someElement); 

残念ながらResizeObserver実験のWebプラットフォームの旗の後ろに、クロム55カナリアです。基本的にpolyfillが必要です：https://github.com/WICG/ResizeObserver/issues/3