html 使用createElement('link ')在javascript中动态加载文本

lhcgjxsq  于 2022-11-27  发布在  Java
关注(0)|答案(1)|浏览(255)

我正在尝试动态加载一些脚本、css文件和文本,以this为例。它对脚本和css文件很有效,但当我尝试添加一个加载文本的链接时就不行了(见下文)。我以前从未尝试过这个,也没有太多关于promises的经验,所以我可能犯了一个明显的错误。
以下加载css文件的承诺已实现,没有任何问题:

var head = document.getElementsByTagName('head')[0];
    return new Promise(function (resolve, reject) {
      let link = document.createElement('link');
      link.rel = 'stylesheet';
      link.type = 'text/css';
      link.href = url;
      link.onload = function () {
        resolve(url);
      };
      link.onerror = function () {
        reject(url);
      };
      head.appendChild(link);
    });
  };

  promised = [linkCSS("javascripts/jquery-ui.css")];

  console.log('promisedCSS', promised);

  Promise.all(promised).then(function () {
  }).catch((reason) => {
    console.log(reason);
  });

...但当尝试执行类似的操作时,可动态地将以下链接添加到head:

<link rel="gettext" type="application/x-po"
    href="javascripts/node_modules/country-region-dropdown-menu/languages/en/LC_MESSAGES/en.po">

......我试图做如下:

function linkGettext(url) {
    var head = document.getElementsByTagName('head')[0];
    return new Promise(function (resolve, reject) {
      let link = document.createElement('link');
      link.rel = 'gettext';
      link.type = 'application/x-po';
      link.href = url;
      link.onload = function () {
        resolve(url);
      };
      link.onerror = function () {
        reject(url);
      };
      head.appendChild(link);
    });
  };

promised = [linkGettext("javascripts/node_modules/country-region-dropdown-menu/languages/en/LC_MESSAGES/en.po")];

  console.log('promisedGETTEXT', promised);

  Promise.all(promised).then(function () {
  }).catch((reason) => {
    console.log(reason);
  });

没有错误,但承诺永远悬而未决。但头部似乎是理想的,所以可能有什么问题的承诺决议?
我如何添加这个动态使用ref='gettext'的链接,以实现这个承诺?

uurv41yg

uurv41yg1#

我试着按照上面的建议用fetch而不是link来加载数据,但是我不确定接下来该怎么处理数据。下面是我用来获取数据的方法,但是我想我必须添加一个命令来运行Gettext,并使用参数来确保它在geodata下拉菜单中可用,但是我不确定该怎么做:

fetch('javascripts/node_modules/country-region-dropdown-menu/languages/en/LC_MESSAGES/en.po').then(response => {
    return response;
  }).then(data => {
    console.log('en_po data here :', data);
  }).catch(err => {
    console.log('error');
  });

所以我现在不使用fetch,而是动态地添加这个链接,而不用等待Promise完成。所以我现在在主脚本中有这个链接(同时我在Promise.all(promised).then(function () {...中加载其他脚本和链接,以确保它们在主脚本开始之前加载)。
到目前为止,它似乎并没有创建一个问题,只是添加这个链接这样:

var head = document.getElementsByTagName('head')[0];

let link = document.createElement('link');
link.rel = 'gettext';
link.type = 'application/x-po';
link.href = "javascripts/node_modules/country-region-dropdown-menu/languages/en/LC_MESSAGES/en.po";
head.appendChild(link);

所有这一切的目的是现在我可以在主脚本中更早地确定将加载哪种语言(因此en.po将根据上下文而变化)

相关问题