Javascript 通过JS自动执行功能在头部创建文本节点时出现问题
这是我第一次使用自动执行的匿名函数,但是,我相信我遗漏了一些基本的、摆在我面前的东西。本质上,我试图通过函数“writeFontFace”传递一个参数,并让它在我的文档头中编写以下代码,如下所示:Javascript 通过JS自动执行功能在头部创建文本节点时出现问题,javascript,appendchild,self-executing-function,createtextnode,Javascript,Appendchild,Self Executing Function,Createtextnode,这是我第一次使用自动执行的匿名函数,但是,我相信我遗漏了一些基本的、摆在我面前的东西。本质上,我试图通过函数“writeFontFace”传递一个参数,并让它在我的文档头中编写以下代码,如下所示: @font-face { font-family: 'arrows'; src: url('fonts/arrows/arrows.eot?'); src: url('fonts/arrows/arrows.eot?#iefix') format('embedded-opent
@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;
}
现在,如果我在函数writeFontFace结尾处取消对“return”语句的注释,我确实会收到我希望收到的相应输出,但是无论出于何种原因,它都不会在我的文档头中附加包含上述@font-face定义的“script”变量?我不太明白为什么。如有任何建议和/或意见,我们将不胜感激。。。再说一次,这是我第一次使用自动执行匿名函数,因此,如果有人觉得他们可能会有一些建设性的批评和/或建议,我希望能少一些讽刺。和往常一样,我们需要提前感谢你
~z~干杯
自动执行匿名函数
(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;
};
基本上,如果其他人遇到类似问题,下面的代码应该为您提供相应的修复:
(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);
};