Nodejs相关：node-webkit如何做到body元素自适应窗口大小

Nodejs相关：node-webkit如何做到body元素自适应窗口大小

现在在用node-webkit写个简单的应用，有个页面是用markdown编辑器（其实就是个textarea）写文章。因为窗口是可自由缩放的（不想禁止缩放），想实现文本框大小自适应窗口（窗口变大文本框也变大，窗口变小文本框也变小，不会有滚动条）。因此马上想到了笨办法就是监听window的resize事件，但貌似无法运行，是这样的：

  index.html:
  
  //默认加载jQuery
  $(document).ready(function(){
    var gui = require('nw.gui')
    var win = gui.Window.get()
    win.on('resize', function(){
      //alert(1)   没有触发
      $('body').width(win.width).height(win.height)
    })
  })

1、以上代码不知道哪里写的有问题？请指教。

2、以上方案即使实现了也不好，有没有其他更好地方案？ 谢谢！


5 回复

当然可以，以下是根据你的需求编写的示例代码及解释：

示例代码

首先，确保你已经安装了 nw.js 并且有一个基本的 HTML 文件结构。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Markdown Editor</title>
  <style>
    body, textarea {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <textarea id="editor"></textarea>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      var gui = require('nw.gui');
      var win = gui.Window.get();
      
      function resizeHandler() {
        document.body.style.width = `${win.width}px`;
        document.body.style.height = `${win.height}px`;
      }

      win.on('resize', resizeHandler);
      resizeHandler(); // 初始化时调用一次
    });
  </script>
</script>
</body>
</html>

解释

  1. HTML 结构：

    • 我们使用了一个 <textarea> 元素作为 Markdown 编辑器。
    • CSS 部分设置了 body 和 textarea 的宽度和高度为 100%，以使其占据整个视口大小。

  2. JavaScript 代码：

    • 使用 document.addEventListener('DOMContentLoaded', ...) 确保 DOM 完全加载后再执行脚本。
    • 引入 nw.gui 并获取当前窗口实例 win。
    • 定义一个 resizeHandler 函数，该函数会在窗口大小变化时被调用，更新 body 的宽度和高度。
    • 监听窗口的 resize 事件，并在每次窗口大小变化时调用 resizeHandler。
    • 在初始化时立即调用 resizeHandler 以确保初始状态正确。

这样，当窗口大小改变时，body 和 textarea 会自动调整大小以填充整个视口，而不会出现滚动条。这种方式不仅简洁，而且避免了使用 alert 或其他可能干扰用户体验的方法。


on是jQuery对象才有的方法，

var win = $(window);

额。。你去看下nw的api文档吧。。

没注意到文档上resize事件是0.8.2才支持。升级后代码可以执行了。 但是，问题本身有更好的解决方案吗？

在Node-WebKit（现称为NW.js）中，你需要正确地处理窗口的尺寸变化，并确保DOM元素能够根据窗口大小进行调整。你的代码有一些问题，包括如何正确获取窗口大小以及如何动态调整<body>的尺寸。

解决方案

首先，确保你已经正确引入了Node-WebKit的API。然后，使用正确的事件监听器来响应窗口大小的变化，并且直接调整<body>元素的CSS属性而不是直接设置宽度和高度。

以下是修正后的代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Markdown Editor</title>
  <style>
    body, html {
      margin: 0;
      padding: 0;
      overflow: hidden; /* 防止出现滚动条 */
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
    }
    textarea {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      resize: none; /* 禁止手动调整大小 */
    }
  </style>
</head>
<body>
  <textarea id="markdown-editor" placeholder="Start typing your article..."></textarea>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      var gui = require('nw.gui');
      var win = gui.Window.get();
      
      win.on('resize', function() {
        document.body.style.width = win.width + 'px';
        document.body.style.height = win.height + 'px';
      });

      // 初始设置
      win.on('loaded', function() {
        document.body.style.width = win.width + 'px';
        document.body.style.height = win.height + 'px';
      });
    });
  </script>
</body>
</html>

关键点解释

  1. CSS样式：我们设置了body和html的margin和padding为0，以防止任何额外的空间。我们还设置了overflow: hidden以防止滚动条的出现。通过使用flexbox布局，我们可以确保<body>和<textarea>始终占据整个可用空间。

  2. JavaScript事件监听：我们使用了resize事件来监听窗口大小的变化，并相应地更新<body>的尺寸。我们还添加了一个loaded事件来在窗口首次加载时初始化尺寸。

这样，当窗口大小改变时，<body>将自动调整其尺寸，从而使得包含在内的<textarea>也会自适应窗口大小，而不会出现滚动条。

回到顶部