0
私のウェブサイトから上記の折りたたみCSSコードを取得するためにjsコードを使用しています。それはGoogle Chromeで正常に動作します。私は、Firefox上でそれを使用する場合、私は、セキュリティエラーを取得します：ここでJavaScriptマップ機能FireFoxのセキュリティエラー
**SecurityError: The operation is insecure.**
findCriticalCSS/outputCss<
map self-hosted
findCriticalCSS
<anonym>
<anonym>
は私のスクリプトです：
function post(path, params, method) {
method = method || "post"; // Set method to post by default if not specified.
// The rest of this code assumes you are not using a library.
// It can be made less wordy if you use one.
var form = document.createElement("form");
form.setAttribute("method", method);
form.setAttribute("action", path);
for(var key in params) {
if(params.hasOwnProperty(key)) {
var hiddenField = document.createElement("input");
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", key);
hiddenField.setAttribute("value", params[key]);
form.appendChild(hiddenField);
}
}
document.body.appendChild(form);
form.submit();
}
(function() {
function findCriticalCSS(w, d) {
// Pseudo classes formatting
var formatPseudo = /([^\s,\:\(])\:\:?(?!not)[a-zA-Z\-]{1,}(?:\(.*?\))?/g;
// Height in px we want critical styles for
var targetHeight = 900;
var criticalNodes = [];
// Step through the document tree and identify nodes that are within our targetHeight
var walker = d.createTreeWalker(d, NodeFilter.SHOW_ELEMENT, function(node) { return NodeFilter.FILTER_ACCEPT; }, true);
while(walker.nextNode()) {
var node = walker.currentNode;
var rect = node.getBoundingClientRect();
if (rect.top < targetHeight) {
criticalNodes.push(node);
}
}
console.log("Found " + criticalNodes.length + " critical nodes.");
// Find stylesheets that have been loaded
var stylesheets = document.styleSheets;
console.log("Found " + stylesheets.length + " stylesheet(s).");
var outputCss = Array.prototype.map.call(stylesheets,function(sheet) {
var rules = sheet.rules || sheet.cssRules;
// If style rules are present
if (rules) {
return {
sheet: sheet,
// Convert rules into an array
rules: Array.prototype.map.call(rules, function(rule) {
try {
// If the rule contains a media query
if (rule instanceof CSSMediaRule) {
var nestedRules = rule.rules || rule.cssRules;
var css = Array.prototype.filter.call(nestedRules, function(rule) {
return criticalNodes.filter(function(e){ return e.matches(rule.selectorText.replace(formatPseudo, "$1"))}).length > 0;
}).map(function(rule) { return rule.cssText }).reduce(function(ruleCss, init) {return init + "\n" + ruleCss;}, "");
return css ? ("@media " + rule.media.mediaText + " { " + css + "}") : null;
} else if (rule instanceof CSSStyleRule) { // If rule does not contain a media query
return criticalNodes.filter(function(e) { return e.matches(rule.selectorText.replace(formatPseudo, "$1")) }).length > 0 ? rule.cssText : null;
} else { // If identified via CSSRule like @font and @keyframes
return rule.cssText;
}
} catch(e) {
/*console.error("Improper CSS rule ", rule.selectorText);
throw e;*/
}
}).filter(function(e) { return e; })
}
} else {
return null;
}
}).filter(function(cssEntry) {return cssEntry && cssEntry.rules.length > 0 })
.map(function(cssEntry) {try { return cssEntry.rules.join(""); }catch(e){return;}})
.reduce(function(css, out) {return out + css}, "")
// Remove linebreaks
console.log(outputCss.replace(/\n/g,""))
}
findCriticalCSS(window, document);
})()
私は私のサイトは、いくつかの外部CSSファイルまたはそのような何かが含まれているためだと思います。誰かが私に問題を見つけてそれを解決するのを助けることができますか？事前に
おかげで、 J.のDOE;）