如何通过调整页面大小而不刷新页面来重新加载html元素？

Question

当我调整页面大小时，我想重新加载一个html元素（画布），而不是整个页面。这可能吗？

谢谢！

Answer 1

很难确切知道你需要重新加载的html元素是什么，但它应该是可能的。

以下是 jQuery 函数的示例，该函数将检查页面的大小调整。

$(window).on('resize', function(){
      var win = $(this); //this = window
      if (win.height() >= 820) { /* ... */ }
      if (win.width() >= 1280) { /* ... */ }
});

Javascript示例：

window.onresize = function() {
    if (window.innerHeight >= 820) { /* ... */ }
    if (window.innerWidth <= 1280) {  /* ... */ }
}

在所需窗口高度或宽度的if语句中，您可以调用该函数重新加载画布。

Answer 2

您可以添加事件监听器

window.onresize = function(){
   var oldcanv = document.getElementById('canvas');
   document.removeChild(oldcanv)

   var canv = document.createElement('canvas');
   canv.id = 'canvas';
   document.body.appendChild(canv);
}