Question

所以，我正在写一个电子应用程序，在某些时候我需要一个路径名。在我的渲染器线程（使用jQuery）上，我有这个代码：

$("#button-that-you-click-for-dialog").click(() => {
    electron.remote.dialog.showOpenDialog({properties:["openDirectory"]});
});

它的效果非常好，因为对话框的显示方式与我期望的完全相同 - 但是当对话框关闭（OK或Cancel）时，页面会重新加载，重置表单中的其他值。我为我的生活无法弄清楚为什么会这样。以下是我在平台方面的建议：

Ubuntu 17.04与Gnome3
Electron 1.7.5 / Chrome 58.0.3029.110
节点8.5.0

为了记录，我甚至都不关心我到目前为止还没有传回任何价值 - 一旦我修复了这个令人讨厌的错误，我就会明白这一点。
我想这里有很多信息，但如果我遗失了什么让我知道

更新：我添加了一个回调来记录我返回的文件路径，但现在窗口在对话框打开时刷新，而不是在它关闭时刷新，这意味着在尝试关闭和console.log结果时，它表示资源已经关闭或释放（可能是因为窗口刷新了）Code I我现在正在使用：

const electron = require("electron");
$("#dir").click((event) => {
    electron.remote.dialog.showOpenDialog({
        properties:["openDirectory"]
    }, (filepaths) => {console.log(filepaths);});
})

第二次更新：我尝试过Siddhesh的代码，效果很好。现在我需要弄清楚我的index.html的哪一部分正在触发刷新（事实证明，我的IDE上正在运行电子的WebGL控制台消息）

这是完整的代码：

的index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="../common/jquery.min.js"></script>
    <meta charset="UTF-8">
    <title>BookRipper</title>
    <link rel="stylesheet" href="../common/bootstrap.min.css"/>
    <link rel="stylesheet" href="../common/bootstrap-grid.min.css"/>
    <link rel="stylesheet" href="../common/bootstrap-reboot.min.css"/>
    <link rel="stylesheet" href="../common/css/font-awesome.min.css" />
    <link rel="stylesheet" href="index.css"/>
    <script src="../common/bootstrap.min.js"></script>
    <script src="index.js" type="application/javascript"></script>
</head>
<body>

<div class="jumbotron">
    <h3 class="display-4" id="title">New Book</h3>
</div>
<footer class="footer clearfix">
    <div class="container">
        Sample Text
    </div>
</footer>
<div class="container">
    <form>
        <div class="row mb-2">
            <div class="col-sm-3 col-md-2 col-lg-1">
                <label for="book-title" class="mt-sm-2">Title</label>
            </div>
            <div class="col">
                <input id="book-title" class="form-control"/>
            </div>
        </div>
        <div class="row mb-2">
            <div class="col-sm-3 col-md-2 col-lg-1">
                <label for="book-author" class="mt-sm-2">Author</label>
            </div>
            <div class="col">
                <input id="book-author" class="form-control"/>
            </div>
        </div>
        <div class="row mb-2">
            <div class="col-sm-3 col-md-2 col-lg-1">
                <label for="book-year" class="mt-sm-2">Year</label>
            </div>
            <div class="col">
                <input type="number" id="book-year" class="form-control" value="2000" />
            </div>
        </div>
        <div class="row mb-2">
            <div class="col-sm-3 col-md-2 col-lg-1">
                <label for="book-n" class="mt-sm-2">Number of disks</label>
            </div>
            <div class="col">
                <input type="number" id="book-n" class="form-control" value="1"/>
            </div>
        </div>
        <div class="row mb-2">
            <div class="col-sm-3 col-md-2 col-lg-1">
                <label for="dir" class="mt-sm-2">Folder</label>
            </div>
            <div class="col">
                <!-- |||||| This is the button in question |||||| -->
                <button id="dir" class="btn">Folder</button>
            </div>
        </div>
        <div class="row mb-2">
            <button
                    type="button"
                    class="btn btn-link"
                    data-toggle="collapse"
                    data-target="#advanced"
                    onclick="$('#advanced').toggleClass('show'); $('#advanced-icon').toggleClass('fa-plus').toggleClass('fa-minus');">
                <i
                        class="fa fa-plus mr-2"
                        id="advanced-icon">
                </i>
                Advanced Settings
            </button>
        </div>
        <div class="collapse" id="advanced">
            <div class="row mb-2">
                <div class="col-sm-3 col-md-2 col-lg-1">
                    <label for="bitrate" class="mt-sm-2">Bitrate</label>
                </div>
                <div class="col">
                    <div class="input-group">
                        <input type="number" id="bitrate" class="form-control" value="24" min="16" max="256" step="4" />
                        <span class="input-group-addon">kbps</span>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

</body>
</html>

index.js：

$ = require('jquery');
$(document).ready(function () {
    $("#book-title").keydown(copyTitle).keyup(copyTitle);

    function copyTitle() {
        document.title = this.value ? this.value : "BookRipper";
        $("#title").text(!this.value?"New Book":this.value);
    }

    const electron = require("electron");
    $("#dir").click((event) => {
        electron.remote.dialog.showOpenDialog({properties:["openDirectory"]}, (filepaths) => {console.log(filepaths)});
    })
});

Answer 1

重置页面的表单/重新加载不是由电子隐式触发的。

您的代码的某些部分可能会明确触发它，例如$("#myForm")[0].reset()或其他内容。

尝试创建新的HTML页面，然后只渲染下面的代码。这对我来说很好，没有重置表单。如果您的问题仍然存在，请尝试粘贴完整的代码。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js" onload="window.$ = window.jQuery = module.exports;"></script>

<script>
    const {dialog} = require("electron").remote

    $(document).ready(function(){    

        $("#btn1").click((event) => {
            dialog.showOpenDialog({ properties:["openDirectory"] }, 
            (paths) => console.log(paths));
        });
    });

</script>

</head>

<body>

    <form action="" id="myForm">
        <input type="text" id="inp1">
        <input type="text" id="inp2">
        <input type="text" id="inp3">
    </form>

    <button id="btn1">Get Path</button>

</body>
</html>

Answer 2

热气腾腾。我终于找到了。我的问题是没有指定被点击的按钮 - 它的类型。我认为这意味着默认为“提交”或“重置”。当我把它设置为“按钮”时，它会让我感到神清气爽，我能够以愉快的方式继续前进。

showOpenDialog（）刷新窗口

2 个答案: