Question

有没有办法用Observable观察浏览器窗口？例如使用rxJS或类似的东西。每次重新调整浏览器窗口时，我都想触发一个动作。

Answer 1

如果我正确理解了您，您希望观察window的调整大小事件。使用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 Blog：

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 Canary，位于实验性网络平台标志之后。您基本上需要填充：https://github.com/WICG/ResizeObserver/issues/3

观察浏览器窗口

2 个答案: