觀察瀏覽器窗口

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。它對任何觀察到的元素的大小的變化作出反應，與導致變化的原因無關。

這個片段是由谷歌開發博客：

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是在Chrome 55金絲雀，實驗網絡平臺的標誌後面。你基本上需要一個polyfill：https://github.com/WICG/ResizeObserver/issues/3