有沒有辦法用Observable觀察瀏覽器窗口?例如rxJS或類似的東西。每當瀏覽器窗口重新縮放時,我想觸發一個動作。觀察瀏覽器窗口
Q
觀察瀏覽器窗口
0
A
回答
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)
})
0
有一個新的原語叫做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
相關問題
- 1. Mozilla瀏覽器中退出觀察
- 2. Visual Studio 2010觀察窗口?
- 3. IAR Embedded Workbench觀察窗口
- 4. 打開窗口瀏覽器
- 5. 跨瀏覽器Modal窗口
- 6. Python GTK窗口瀏覽器
- 7. 跨瀏覽器窗口窗體註銷?
- 8. Visual Studio服務器 - 瀏覽器窗口
- 9. 嵌入的Microsoft Word在瀏覽器窗口(跨瀏覽器)
- 10. 從swt瀏覽器打開外部瀏覽器窗口
- 11. 用於XCode調試的觀察窗口
- 12. 可在模態窗口中觀察
- 13. Visual Studio 2017社區觀察窗口
- 14. 觀察多個窗口服務
- 15. VS2010,觀察窗口的列寬
- 16. PrototypeJS觀察窗口尺寸變化?
- 17. 以Java嵌入Web瀏覽器窗口
- 18. 更改尺寸瀏覽器窗口
- 19. 跨瀏覽器窗口關閉事件
- 20. MASM - 查找瀏覽器窗口標題?
- 21. 獲取相對於瀏覽器窗口
- 22. AS3:獲取瀏覽器窗口大小?
- 23. 新窗口|瀏覽器互動
- 24. 硒Python最小化瀏覽器窗口
- 25. 如何使整個瀏覽器窗口
- 26. GeckoFX瀏覽器 - 控制新窗口
- 27. 關閉所有瀏覽器窗口?
- 28. 字符串html到瀏覽器窗口
- 29. 關閉瀏覽器窗口javascript for blackberry
- 30. 發送「Enter」鍵到瀏覽器窗口
這就是它,謝謝:) – Leonzen