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

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

1 个答案: