如何检查Font Awesome是否用javascript加载在网页中
How to check if Font Awesome is loaded in web page with javascript?
我需要检查网页中是否有Font Awesome。如果没有,我将用javascript加载它。有点像facebook-sdk如何检查是否有一个包含id"facebook-jsdk"的脚本元素,如果是,它只返回(什么都不做),如果不是,它加载它。我需要为Font Awesome这样做。
我认为这是检查字体是否很棒的最佳方法,但我不确定它是否比重新加载慢,即使它在那里。
function css(element, property) {
return window.getComputedStyle(element, null).getPropertyValue(property);
}
window.onload = function () {
var span = document.createElement('span');
span.className = 'fa';
span.style.display = 'none';
document.body.insertBefore(span, document.body.firstChild);
if ((css(span, 'font-family')) !== 'FontAwesome') {
// add a local fallback
}
document.body.removeChild(span);
};
一个不确定的方法是检查Css文件的存在。下面的函数可以找到许多变体,例如从cdn提供的变体,或者在文件名中有一个"-min"后缀。不太可能有这样的情况会错误地返回true(例如,如果有人创建了一个名为"font真棒extensions.css"的额外css文件)。这种方法更可能的问题是,如果一个字体真棒捆绑在另一个文件中,那么它就找不到该文件并错误地返回false。
function findCss(fileName) {
var finderRe = new RegExp(fileName + '.*?'.css', "i");
var linkElems = document.getElementsByTagName("link");
for (var i = 0, il = linkElems.length; i < il; i++) {
if (linkElems[i].href && finderRe.test(linkElems[i].href)) {
return true;
}
}
return false;
}
console.log(findCss("font-awesome"));
这里有一种方法,但问问自己为什么要这样做?来源
/**
* Checks if a font is available to be used on a web page.
*
* @param {String} fontName The name of the font to check
* @return {Boolean}
* @license MIT
* @copyright Sam Clarke 2013
* @author Sam Clarke <sam@samclarke.com>
*/
(function (document) {
var calculateWidth, monoWidth, serifWidth, sansWidth, width;
var body = document.body;
var container = document.createElement('div');
var containerCss = [
'position:absolute',
'width:auto',
'font-size:128px',
'left:-99999px'
];
// Create a span element to contain the test text.
// Use innerHTML instead of createElement as it's smaller
container.innerHTML = '<span style="' + containerCss.join(' !important;') + '">' +
Array(100).join('wi') +
'</span>';
container = container.firstChild;
calculateWidth = function (fontFamily) {
container.style.fontFamily = fontFamily;
body.appendChild(container);
width = container.clientWidth;
body.removeChild(container);
return width;
};
// Pre calculate the widths of monospace, serif & sans-serif
// to improve performance.
monoWidth = calculateWidth('monospace');
serifWidth = calculateWidth('serif');
sansWidth = calculateWidth('sans-serif');
window.isFontAvailable = function (fontName) {
return monoWidth !== calculateWidth(fontName + ',monospace') ||
sansWidth !== calculateWidth(fontName + ',sans-serif') ||
serifWidth !== calculateWidth(fontName + ',serif');
};
})(document);
使用jquery
可以这样做
var url = "https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css";
check if the css is loaded
if (!$("link[href=url]").length)
//append the link to the head tag if not loaded
$('<link href=url rel="stylesheet">').appendTo("head")
相关文章:
- HTML外部javascript加载另一个javascript
- 什么是谷歌地图'的javascript加载策略
- 使用javascript加载knockoutjs组件
- Javascript - 加载函数运行时未定义的变量
- 使用javascript加载并显示来自另一个域的页面,而不显示原始URL
- 使用Javascript加载页面
- Javascript加载时间过长
- 使用纯Javascript加载外部URL内容
- 如何在使用javascript加载页面时直接设置对象参数
- 每次使用 Javascript 加载页面时增加一个数字(变量)的简单方法
- 将外部 SVG 和包含 JavaScript 加载到 HTML 中
- 是否有一个 JavaScript 加载器可以将套接字的数量限制为 1 或 2
- 使用本地生成的代码通过 JavaScript 加载 IFrame
- Jquery/javascript:加载页面时不需要的重复函数
- 一段时间后使用Javascript加载网页ASP.net
- 在https网站上用javascript加载封面图片
- 如何使用cURL获取JavaScript加载的网络内容
- 如何检查是否使用javascript加载了框架?-不是加载,不是iframe
- I'我正在尝试将JavaScript加载到我的UIWebView中
- 如何用Javascript加载本地文件