为何Nodejs的nodewebkit可以把链接拖到桌面？

为何Nodejs的nodewebkit可以把链接拖到桌面？

<img src=http://img.itc.cn/photo/ojSPet2V8Bj> 拖动的时候敢显示个小图标么？不用显示标题和链接了，赶脚这样难看啊

4 回复

当然可以！node-webkit（现在称为NW.js）是一个基于Chromium和Node.js的开源框架，它允许开发者使用Web技术（HTML、CSS和JavaScript）来构建跨平台的应用程序。NW.js的一个强大功能就是它可以处理桌面级别的操作，比如将链接拖放到桌面上。

为什么 NW.js 可以实现这个功能？

NW.js 提供了丰富的API，使得开发者可以直接与操作系统交互。通过这些API，我们可以捕获用户的拖放事件，并创建一个自定义的文件（例如 .url 文件），将其保存到桌面。

示例代码

以下是一个简单的示例，展示了如何在 NW.js 中实现将链接拖放到桌面的功能：

<!DOCTYPE html>
<html>
<head>
    <title>Drag Link to Desktop Example</title>
</head>
<body>
    <h1>Drag this link to your desktop:</h1>
    <a id="link" href="https://www.example.com">Example Link</a>

    <script>
        document.getElementById('link').addEventListener('dragstart', function(event) {
            event.dataTransfer.setData('text/plain', 'https://www.example.com');
        });

        nw.Window.get().window.ondrop = function(event) {
            event.preventDefault();
            event.stopPropagation();

            const url = event.dataTransfer.getData('text/plain');
            const fs = require('fs');
            const path = require('path');

            // Define the URL file content
            const content = `[InternetShortcut]\nURL=${url}`;

            // Save the file to the user's desktop
            const desktopPath = path.join(nw.App.dataPath, '../Desktop');
            fs.writeFile(path.join(desktopPath, 'example.url'), content, (err) => {
                if (err) throw err;
                console.log('File saved to desktop.');
            });
        };

        nw.Window.get().window.ondragover = function(event) {
            event.preventDefault();
        };
    </script>
</body>
</html>

解释

  1. dragstart 事件：当用户开始拖动链接时，dragstart 事件被触发。在这个事件中，我们使用 event.dataTransfer.setData 方法设置数据类型为 text/plain，并将链接的URL作为数据传递。

  2. ondrop 事件：当用户将链接拖放到窗口上时，ondrop 事件被触发。在这个事件中，我们首先调用 event.preventDefault() 阻止默认行为。然后从 event.dataTransfer.getData 获取之前设置的数据（即链接的URL）。接着，我们使用 Node.js 的 fs 和 path 模块将这个URL写入一个 .url 文件，并保存到用户的桌面。

  3. ondragover 事件：为了使拖放操作正常工作，我们需要阻止浏览器的默认行为。通过调用 event.preventDefault()，我们可以允许拖放操作。

通过这种方式，你可以轻松地将链接拖放到桌面，并生成一个 .url 文件。这个文件可以在Windows系统上直接双击打开链接。


這東西應該是瀏覽器處理的 chrome這個層面處理的 應該不是chromium或者v8的功能了 曾經在firefox的基礎上做過這樣的東西 跟Gecko關係也不大，我覺得可以參考一下chrome自己實現一下，webkit chrome沒有太深入研究，不過感覺上應該差不多

你试试 chrome浏览器 也是可以的

为何 Node.js 的 nw.js 可以把链接拖到桌面？

nw.js 是一个基于 Chromium 和 Node.js 的开源开发平台。它允许开发者创建跨平台的应用程序。其中一个特性是支持文件拖放操作，这意味着你可以将网页上的链接拖放到桌面上，生成相应的 .url 文件。

示例代码

为了实现将链接拖放到桌面的功能，我们可以使用 nw.js 提供的 API 来处理拖放事件。下面是一个简单的示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>Drag and Drop Link to Desktop</title>
    <style>
        #link {
            width: 300px;
            height: 100px;
            background-color: lightblue;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="link" draggable="true" ondragstart="drag(event)">
        Drag me to desktop!
    </div>

    <script>
        function drag(event) {
            event.dataTransfer.setData('text/plain', 'http://example.com');
        }

        document.addEventListener('drop', function(event) {
            event.preventDefault();
            const linkData = event.dataTransfer.getData('text/plain');
            const urlFileContent = `[InternetShortcut]\nURL=${encodeURIComponent(linkData)}`;

            const blob = new Blob([urlFileContent], { type: 'text/plain' });
            nw.Shell.moveItemToTrash(blob);
        }, false);

        document.addEventListener('dragover', function(event) {
            event.preventDefault();
        });
    </script>
</body>
</html>

解释

  1. HTML 结构：

    • 创建了一个简单的 div 元素，用户可以将其拖动。
    • 设置 draggable="true" 属性，使元素可拖动。

  2. CSS 样式：

    • 设置样式使 div 元素看起来更美观，并设置为指针形状的光标，提示用户可以拖动。

  3. JavaScript 逻辑：

    • 使用 ondragstart 事件捕获拖动开始时的数据。
    • 在 drag 函数中，设置拖动数据（这里是一个示例链接）。
    • 使用 dragover 事件阻止默认行为，以便触发 drop 事件。
    • 使用 drop 事件处理拖放结束后的操作，创建一个包含链接信息的 .url 文件，并使用 nw.Shell.moveItemToTrash 方法将该文件移动到桌面。

通过这种方式，你可以实现将链接拖放到桌面上并生成对应的 .url 文件。

回到顶部