我正在尝试制作一个更改网站 css 的 chrome 扩展。 css 使用 Ajax 从 pastebin 加载。问题是在显示新 css 之前显示旧网站 - 我怎样才能让它只显示更改了 css 的网站?
Content.js:
var s = document.createElement('style');
s.setAttribute("type", "text/css");
var r;
$('head').ready(function() {
$.get("https://pastebin.com/raw/css-file", function(r) {
s.innerHTML = r;
document.head.appendChild(s);
});
});
manifest.json(相关):
{
"permissions": [
"https://scratch.mit.edu/*",
"https://pastebin.com/raw/*"
],
"content_scripts": [
{
"matches": [
"https://scratch.mit.edu/*",
"http://scratch.mit.edu/*"
],
"js": ["jquery-2.2.2.min.js", "content.js"]
}
]
}
最佳答案
一种选择是在加载新样式之前阻止主体可见,如下所示:
$('body').hide();
var s = document.createElement('style');
s.setAttribute("type", "text/css");
var r;
$('head').ready(function() {
$.get("https://pastebin.com/raw/css-file", function(r) {
s.innerHTML = r;
document.head.appendChild(s);
$('body').show();
});
});
但这有一个附带问题,您不确定 $.get() 调用需要多长时间,如果返回时间很长,页面将只是空白。
因此,与其隐藏正文,更好的解决方案可能是暂时替换正文 html,像这样...
// Save the original body, so we can put it back later
var originalBody = $('body').html();
// Replace the body with a please wait message (use whatever you want)
var pleaseWaitBody = '<div style="text-align: center; margin-top: 100px;">Loading, please wait...</div>';
$('body').html(pleaseWaitBody);
var s = document.createElement('style');
s.setAttribute("type", "text/css");
var r;
$('head').ready(function() {
$.get("https://pastebin.com/raw/css-file", function(r) {
s.innerHTML = r;
document.head.appendChild(s);
// Now that the new style is applied, put the original body back
$('body').html(originalBody);
});
});
编辑: 上面的代码不适用于 Chrome 扩展。但是,还有另一个 StackOverflow 答案可以提供帮助。请看How to hide everything before page load with Chrome Extension
关于javascript - Chrome 扩展上的旧 CSS 闪烁,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36227216/