Внешний js не работает при использовании node.js readFileSync () для чтения файла HTML в виде строки - PullRequest
Новая
       10

Внешний js не работает при использовании node.js readFileSync () для чтения файла HTML в виде строки

0 голосов
/ 08 февраля 2019

Я работаю над разработкой расширения кода (веб-просмотр) и хочу разделить файл HTML и файл JS.

Когда я использую readFileSync () для чтения HTML-файла, он успешно анализирует HTML-элемент в веб-представлении, но Javascript не работает.

Я попытался поместить весь код JS непосредственно в тег, и он работает.Поэтому, я думаю, может быть, это проблема относительного пути.Я пробовал разные типы пути:

'.. / js / main.js', '.. \ js \ main.js'

, а также абсолютный путь от моего диска Cи они не работают.Я действительно понятия не имею об этом.

Моя файловая структура:

enter image description here

Мой файловый ридер с моего расширения .ts: 

function getWebviewContent(url: vscode.Uri) {
    // url.fsPath : xxxx\helloworld\src\html\index.html
    return fs.readFileSync(url.fsPath, "utf8");
}

МойHTML-файл: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
        integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

    <title>Hello World Testing</title>
</head>
<body>
    <h1> Hello Form </h1>
    <div className="form-row">
        <div className="form-group col-md-6">
            <label>Email</label>
            <input type="email" className="form-control" id="inputEmail" ref="email" />
        </div>
        <div className="form-group col-md-6">
            <label>Name</label>
            <input type="text" className="form-control" id="inputName" ref="name" />
        </div>
    </div>
    <button type="button" id="greeting" class="btn btn-primary" style="margin: 10px">Submit</button>
    <script type="text/javascript" src="../js/main.js"></script>
</body>
</html>

Мой JS-файл: 

(function() {
    const vscode = acquireVsCodeApi();
    const btn = document.getElementById('greeting');


    btn.onclick = () => {
        const name = document.getElementById('inputName').value;
        console.log(name)
        vscode.postMessage({
            command: 'greeting',
            text: "Hello, " + name
        });
    }
}())

У меня новая пробная версия, и она работает, но сейчас я не знаю, как ссылаться на правильный путь в моем HTMLфайл.

Я изменил свою функцию чтения файлов: 

function getWebviewContent(url: vscode.Uri) {
    return `<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
            integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

        <title>Hello World Testing</title>
    </head>
    <body>
        <h1> Hello Form </h1>
        <div className="form-row">
            <div className="form-group col-md-6">
                <label>Email</label>
                <input type="email" className="form-control" id="inputEmail" ref="email" />
            </div>
            <div className="form-group col-md-6">
                <label>Name</label>
                <input type="text" className="form-control" id="inputName" ref="name" />
            </div>
        </div>
        <button type="button" id="greeting" class="btn btn-primary" style="margin: 10px">Submit</button>
        <script type="text/javascript" src="${url}"></script>
    </body>
    </html>`;
}

Вот как я вызываю функцию: 

const scriptPathOnDisk = vscode.Uri.file(path.join(context.extensionPath, 'src/js', 'main.js'));
const scriptUri = scriptPathOnDisk.with({ scheme: 'vscode-resource' });
panel.webview.html = getWebviewContent(scriptUri);

Когда я распечатываю getWebviewContent (), онявляется строкой HTML, и я обнаружил, что: 

<script src="vscode-resource:/c%3A/Users/Kelvinyu/Documents/test/helloworld-vscode-extension/helloworld/src/js/main.js">

Я думаю, что это правильный путь, но как я могу ссылаться на это в моем HTML, я хочу, чтобы он был относительным.

...