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

dynamically appended Web Font Loader - how to check if script already exist

本文关键字：检查 脚本 存在 是否 何检查 Web 字体 加载 动态      更新时间：2023-09-26

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

$(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 请求以加载新的字体集？

我非常确定您可以在脚本中添加一个 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
相关文章：