在沒有服務器的情況下從HTMLHead讀取JSON檔案

我得到了一些翻譯的 json 檔案。我想在 JS 檔案中使用這個檔案來翻譯一些字串。但是我沒有一個很好的解決方案來加載這個檔案和資料。

到目前為止我得到的是我的 HTML 檔案：

<script type='application/json' src='lang/translations.json'></script>
<script src="Javascript/translator.js" charset="UTF-8"></script>

JSON 檔案：

{
  "language": {
    "en": {
      "closure": "Closure",
      "documents": "Documents",
      "overview": "Overview"
    },
    "de": {
      "closure": "Abschluss",
      "documents": "Dokumente",
      "overview": "übersicht"
    }
  }
}

還有我的 JS 檔案：

let docLanguage = document.documentElement.lang;
let browserLanguage = navigator.language.substr(0, 2);
let lang = docLanguage ? docLanguage : browserLanguage;
let texts;

const Http = new XMLHttpRequest();
const url = "lang/"   lang   ".json";

Http.open("GET", url, false);
Http.send();
Http.onreadystatechange = function () {
    texts = JSON.parse(Http.responseText);
    return texts;
}

let getJson = jQuery.getJSON('lang/'   lang   '.json', {format: "json", async: false})
    .done(function (data) {
        // texts = data;
        return data;
    }).fail(function () {
        console.log('empty');
    });

class translator {
    constructor(lang) {
        this.lang = lang;
        this.translations = texts;
    }

    _(keyName) {
        // return texts.get(keyName);
    //  todo get by keyName
    }

    transHtml(attribute = 'data-lang') {
        let htmlElements = document.querySelectorAll('['   attribute   ']');
        for (let htmlElement of htmlElements) {
            let keyName = htmlElement.getAttribute(attribute);
            htmlElement.textContent = this._(keyName);
        }
    }
}

var translate = new translator(lang);

但問題是，翻譯檔案讀得晚，在建構式中我不能使用這部分，或者我做錯了什么？

那么加載和讀取本地存盤的 json 檔案的最佳方法是什么。

我不想要服務器或其他任何東西，只想要可以在所有現代瀏覽器上運行的純 Javascript。因為這是用戶的匯出，他們應該能夠觀看此頁面而無需安裝任何東西或需要互聯網連接

uj5u.com熱心網友回復：

如果你想堅持使用同步 XHTTPRequest（不推薦）那么你只需要改變send()函式的順序，你在附加onreadystatechange事件監聽器之前呼叫它，它必須在之后呼叫：

Http.open("GET", url, false);
Http.onreadystatechange = function () {
    texts = JSON.parse(Http.responseText);
    return texts;
}
Http.send(); // called after onreadystatechange

它會作業，但在控制臺中顯示警告 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience.

建議在 JavaScript 中使用異步函式。異步建構式不起作用，所以有一些模式可以幫助解決這個問題：https : //stackoverflow.com/a/43433773/3075373

例如，最好使用這樣的.init()函式：

let docLanguage = document.documentElement.lang;
let browserLanguage = navigator.language.substr(0, 2);
let lang = docLanguage ? docLanguage : browserLanguage;

class translator {
    constructor(lang) {
        this.lang = lang;
    }

    init(cb) {
        jQuery.getJSON('lang/'   this.lang   '.json', { format: "json" })
        .done(result => {
            this.translations = result;
            cb.bind(this)();
        })
        .fail(err => console.log(err))
    }

    _(keyName) {
        // return texts.get(keyName);
    //  todo get by keyName
    }

    transHtml(attribute = 'data-lang') {
        let htmlElements = document.querySelectorAll('['   attribute   ']');
    
        for (let htmlElement of htmlElements) {
            let keyName = htmlElement.getAttribute(attribute);
            htmlElement.textContent = this._(keyName);
        }
    }
}

var translate = new translator(lang);
translate.init(() => {
    // inside you can use methods that rely on translations being loaded e.g:
    translate.transHtml();
})

@Answer 評論：

可以添加例如另一個檔案 languages.js

const languages = {
    "language": {
        "en": {
        "closure": "Closure",
        "documents": "Documents",
        "overview": "Overview"
        },
        "de": {
        "closure": "Abschluss",
        "documents": "Dokumente",
        "overview": "übersicht"
        }
    }
}

export default languages;

and then in your main script add type="module" so that you can import another js file (note: it will work mostly in modern browsers, usually it's done with help of webpack etc. to help with older browsers but it's whole another topic)

<script type="module">
import lngs from './languages.js'

let docLanguage = document.documentElement.lang;
...
...
...
rest of script

You can simply also paste languages object at the top into your main script and then there will be no need to import another js file.

標籤：javascript json 无服务器 读取文件

上一篇：合并/更新來自兩個不同json檔案的json物件

下一篇：如果值不為空，我如何只在物件中添加欄位？Javascript