Question

我正在创建一个Atom.io包，但是在为我的GUI加载HTML时遇到了一些麻烦。

我所做的是创建一个新的HTML文件来包含基本的GUI：

<atom-panel class='modal'>
    <h2>Please select file.</h2>
    <div name='open-file-list' class='select-list'>
        <ol />
    </div>

    <br />
    <div class='block'>
        <button name='cancelButton' class='inline-block'>Cancel</button>
        <button name='okButton' class='inline-block'>Ok</button>
        <button name='openFileButton' class='inline-block'>File not listed</button>
    </div>

</atom-panel>

我正在尝试将其加载到我的package-view.js中，但是我得到的只是一个空文件。我的代码如下：

    constructor(serializedState)
    {    
        // Create root element
        this.element = document.createElement('div');
        this.element.classList.add('srt-helper');

        let fileReader = new FileReader();
        fileReader.onload = function(e)
        {
            console.log('File loaded...')
            let result = fileReader.result;
            console.log(result);
        }
        let f = new File([''], '../views/file-select-panel.html');
        fileReader.readAsText(f);
    }

请注意我使用的是javascript而不是coffe脚本。之后我打算创建一个新的div对象，并将我的文件内容作为内部html添加到它。

这是最好的方法吗？如果是这样，我做错了什么？

注意：我为html文件创建了一个名为：views。

的文件夹

Answer 1

我用以下代码解决了这个问题：

/*
 * Load a file using XMLHttpRequest.
 * Returns a promise that can be used for the loading.
 */
getFileLoadPromise(fileUrl)
{
    let promise = new Promise((resolve, reject) =>
    {
        let request = new XMLHttpRequest();
        request.open('GET', fileUrl);

        request.onload = () =>
        {
            if (request.status === 200)
                resolve(request.responseText);

            else
                reject(Error(request.statusText));
        };

        request.onError = () =>
        {
            reject(Error('Network error.'))
        };

        request.send();
    });

    return promise;
}

在Atom.io包中加载HTML文件

1 个答案: