我用纯JavaScript编写了下面的代码,测试过并且可以执行。
所有源代码(html,css和Javascript)+图像和示例字体在这里:
github上的链接。
第一个代码块是一个具有特定文件扩展名方法的对象:
html
和
css
。第二个代码块将在下面解释,但以下是简短描述。
它实现以下功能:
- 函数
check_file
接受两个参数:一个字符串路径和回调函数。
- 获取给定路径的内容
- 获取给定路径的文件扩展名(
ext
)
- 调用
srcFrom
[ext
]对象方法返回由src
、href
等在字符串上下文中引用的相对路径数组。
- 对路径数组中的每个路径进行同步调用
- 在错误时停止并返回HTTP错误消息和存在问题的路径,因此您还可以将其用于其他问题,如403(禁止访问)等。
为方便起见,它解析为相对路径名,并不关心使用哪种协议(http或https,都可以)。
它还会在解析CSS后清理DOM。
var srcFrom =
{
html:function(str)
{
var prs = new DOMParser();
var obj = prs.parseFromString(str, 'text/html');
var rsl = [], nds;
['data', 'href', 'src'].forEach(function(atr)
{
nds = [].slice.call(obj.querySelectorAll('['+atr+']'));
nds.forEach(function(nde)
{ rsl[rsl.length] = nde.getAttribute(atr); });
});
return rsl;
},
css:function(str)
{
var css = document.createElement('style');
var rsl = [], nds, tmp;
css.id = 'cssTest';
css.innerHTML = str;
document.head.appendChild(css);
css = [].slice.call(document.styleSheets);
for (var idx in css)
{
if (css[idx].ownerNode.id == 'cssTest')
{
[].slice.call(css[idx].cssRules).forEach(function(ssn)
{
['src', 'backgroundImage'].forEach(function(pty)
{
if (ssn.style[pty].length > 0)
{
tmp = ssn.style[pty].slice(4, -1);
tmp = tmp.split(window.location.pathname).join('');
tmp = tmp.split(window.location.origin).join('');
tmp = ((tmp[0] == '/') ? tmp.substr(1) : tmp);
rsl[rsl.length] = tmp;
}
});
});
break;
}
}
css = document.getElementById('cssTest');
css.parentNode.removeChild(css);
return rsl;
}
};
这里是获取文件内容并根据文件扩展名调用上述对象方法的函数:
function check_file(url, cbf)
{
var xhr = new XMLHttpRequest();
var uri = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onload = function()
{
var ext = url.split('.').pop();
var lst = srcFrom[ext](this.response);
var rsl = [null, null], nds;
var Break = {};
try
{
lst.forEach(function(tgt)
{
uri.open('GET', tgt, false);
uri.send(null);
if (uri.statusText != 'OK')
{
rsl = [uri.statusText, tgt];
throw Break;
}
});
}
catch(e){}
cbf(rsl[0], rsl[1]);
};
xhr.send(null);
}
要使用它,只需像这样调用它:
var uri = 'htm/stuff.html';
check_file(uri, function(err, pth)
{
if (err)
{ document.write('Aw Snap! "'+pth+'" is missing !'); }
});
请随意评论和编辑,我匆忙完成了这个任务,所以可能不是很完美 :)