javascript - 动态附加的 Web 字体加载器 - 如何检查脚本是否已经存在

Question

我正在构建具有选择字体选项的演示文稿生成器。用户可以从列表中选择字体，这会触发带有所选字体的字体加载器。问题是它每次都附加新脚本。

$(document).on('click', '.fonts-container ul li', function(){  
    var $el = $(this);
    var fontName = $el.data('fontname');
    $(this).closest(".editor").find('.text2').css('font-family', fontName);
    $("#data-store").data("text").push($el.data('fontname'));
    WebFontConfig = {
        google: { families: $("#data-store").data("text")
      }  
    }
    fontLoad();
});


var fontLoad = function() {
  var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
        '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);  
}

如何检查此脚本是否已经存在，如果存在，则触发 http 请求以加载新的字体集？

Answer 1

我很确定您可以在脚本中添加一个 ID，例如font-script，然后在单击时再次检查它是否存在：

var fontLoad = function() {
    if(document.getElementById('font-script').length) return;
    var wf = document.createElement('script');
    wf.id = 'font-script';
    ...the rest of your code