[英]Trouble Creating Text Node in Head via JS Self-Executing Function
This is the first time that I am working with self-executing anonymous functions, however, I believe that I am missing something that is both fundamental and right in front of my face. 这是我第一次使用自我执行的匿名函数,但是,我认为我错过了一些既基本又正确的东西。 Essentially, I am attempting to pass an argument through the function 'writeFontFace()' and have it write the following code inside the head of my document, like so:
本质上,我试图通过函数'writeFontFace()'传递一个参数,并使其在我的文档头部中写入以下代码,如下所示:
@font-face {
font-family: 'arrows';
src: url('fonts/arrows/arrows.eot?');
src: url('fonts/arrows/arrows.eot?#iefix') format('embedded-opentype'),
url('fonts/arrows/arrows.woff?') format('woff'),
url('fonts/arrows/arrows.ttf?') format('truetype'),
url('fonts/arrows/arrows.svg?#arrows') format('svg');
font-weight: normal;
font-style: normal;
}
Now, if I un-comment the 'return' statement at the end of this function (writeFontFace) I do receive the appropriate output that I am expecting to receive, however (for whatever reason), it is not appending the 'script' variable (containing the aforementioned @font-face definition) inside of the head of my document? 现在,如果我取消注释此函数(writeFontFace)末尾的“ return”语句,则确实会收到期望接收的适当输出,但是(出于某种原因)它不会附加“ script”变量(包含前面提到的@ font-face定义)在我的文档标题中? Can't quite figure out why.
不太清楚为什么。 Any suggestions and/or comments would surely be appreciated... And again, this is my first time working with self-executing anonymous functions, therefore, I would appreciate a low level of sarcasm if anyone feels as though they might have some constructive criticism and/or advice.
任何建议和/或评论都将不胜感激...再次,这是我第一次使用自执行匿名功能,因此,如果有人觉得自己可能会有一些建设性的批评,我会感到轻率的嘲讽。和/或建议。 As always, much appreciation in advance.
与往常一样,提前感谢。
~ Cheers 〜干杯
Self-Executing Anonymous Function 自执行匿名功能
(function() { /** * Object Literal {Property Values} Constant: property values to be used throughout this object */ const vars = { decCharPrefix : '&#', decCharSuffix : ';', baseGlyphValue: 59392, } }; /** * bpIconFont {Constructor} Core: constructor for this library; ensures that this library is instantiated if an internal method is called */ var bpIconFont = function() { if(!(this instanceof bpIconFont)) return new bpIconFont(); }; /** * bpIconFont.fn */ bpIconFont.fn = bpIconFont.prototype = { init: function() { console.log('bpIconFont Initialized!'); } } window.bpIconFont = bpIconFont; // Expose: anonymous self-executing function to DOM })(); /** * getFontDirectroy {Method} Gets: generates the directory to which the passed font will be placed, via relative path * @param {Array/String} font Converts: the passed array or string and generates a 'relative path' for the desired font * @return {Array/String} Returns: the relative path for the font */ bpIconFont.fn.getFontDirectroy = function(font) { var fontDir = 'fonts/' + font + '/'; return fontDir; }; /** * getFontDirectroy {Method} Gets: generates the directory to which the passed font will be placed, via relative path * @param {Array/String} font Converts: the passed array or string and generates a 'relative path' for the desired font * @return {Array/String} Returns: the relative path for the font */ bpIconFont.fn.writeFontFace = function(font) { var dir = bpIconFont().getFontDirectroy(font); var head = document.getElementsByTagName("head")[0]; var script = document.createElement('style'); script.setAttribute('type', 'text/css'); var fontFace = '@font-face {' + '\\n\\tfont-family: \\'' + font + '\\';\\n\\tsrc: url(\\'' + dir + font + '.eot?\\');' + '\\n\\tsrc: url(\\'' + dir + font + '.eot?#iefix\\') format(\\'embedded-opentype\\'),' + '\\n\\t\\t url(\\'' + dir + font + '.woff?\\') format(\\'woff\\'),' + '\\n\\t\\t url(\\'' + dir + font + '.ttf?\\') format(\\'truetype\\'),' + '\\n\\t\\t url(\\'' + dir + font + '.svg?#' + font + '\\') format(\\'svg\\');' + '\\n\\tfont-weight: normal;' + '\\n\\tfont-style: normal;' + '\\n}'; script.appendChild(document.createTextNode(fontFace)); head.appendChild(script); // return fontFace; };
Essentially, if anyone else runs into a similar problem, the code below should supply you with the appropriate fix: 本质上,如果其他任何人遇到类似的问题,则下面的代码应为您提供适当的修复:
(function() {
/**
* bpIconFont {Constructor} Core: constructor for this library; ensures that this library is instantiated if an internal method is called
*/
var bpIconFont = function() {
if(!(this instanceof bpIconFont))
return new bpIconFont();
};
/**
* bpIconFont.fn
*/
bpIconFont.fn = bpIconFont.prototype = {
init: function() {
console.log('bpIconFont Initialized!');
}
}
window.bpIconFont = bpIconFont; // Expose: anonymous self-executing function to DOM
})();
/**
* Object Literal {Property Values} Constant: property values to be used throughout this object
*/
vars = {
decCharPrefix : '&#',
decCharSuffix : ';',
baseGlyphValue: 59392,
};
/**
* getFontDirectroy {Method} Gets: generates the directory to which the passed font will be placed, via relative path
* @param {Array/String} font Converts: the passed array or string and generates a 'relative path' for the desired font
* @return {Array/String} Returns: the relative path for the font
*/
bpIconFont.fn.getFontDirectroy = function(font) {
var fontDir = 'fonts/' + font + '/';
return fontDir;
};
/**
* getFontDirectroy {Method} Gets: generates the directory to which the passed font will be placed, via relative path
* @param {Array/String} font Converts: the passed array or string and generates a 'relative path' for the desired font
* @return {Array/String} Returns: the relative path for the font
*/
bpIconFont.fn.writeFontFace = function(font) {
var dir = bpIconFont().getFontDirectroy(font);
var head = document.getElementsByTagName("head")[0];
var script = document.createElement('style');
script.setAttribute('type', 'text/css');
var cssDef = '\ndiv#output-window {' +
'\n\tfont-family:\'' + font + '\';' +
'\n}';
var fontFace = '@font-face {' +
'\n\tfont-family: \'' + font +
'\';\n\tsrc: url(\'' + dir + font + '.eot?\');' +
'\n\tsrc: url(\'' + dir + font + '.eot?#iefix\') format(\'embedded-opentype\'),' +
'\n\t\t url(\'' + dir + font + '.woff?\') format(\'woff\'),' +
'\n\t\t url(\'' + dir + font + '.ttf?\') format(\'truetype\'),' +
'\n\t\t url(\'' + dir + font + '.svg?#' + font + '\') format(\'svg\');' +
'\n\tfont-weight: normal;' +
'\n\tfont-style: normal;' +
'\n}';
script.appendChild(document.createTextNode(fontFace));
script.appendChild(document.createTextNode(cssDef));
head.appendChild(script);
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.