第一次打开网页的时候加载loading的html 但是后面怎么刷新都不会加载了
第一次打开网页的时候加载loading的html 但是后面怎么刷新都不会加载了
index.html:54 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
这个错误通常是由于appendChild()方法的参数不是一个节点类型引起的。
请确保将节点作为参数传递给appendChild()方法，例如：
var myNode = document.createElement("div");
document.body.appendChild(myNode);
如果参数不是节点类型，将会抛出 TypeError 错误，就像你遇到的那样。
window.onload = function() {
// 检查是否存在 first_visit cookie
var firstVisit = getCookie('first_visit');
if (firstVisit === 'true') {
// 如果存在，说明不是第一次访问，直接加载正常页面
} else {
// 如果不存在，说明是第一次访问，加载 loading 页面
loadLoadingPage();
// 页面加载完毕后设置 first_visit cookie
window.addEventListener('load', function() {
setCookie('first_visit', 'true', 365);
});
}
};
// 获取 cookie 值
function getCookie(name) {
var value = '; ' + document.cookie;
var parts = value.split('; ' + name + '=');
if (parts.length === 2) {
return parts.pop().split(';').shift();
}
}
// 设置 cookie 值
function setCookie(name, value, days) {
var expires = '';
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = '; expires=' + date.toGMTString();
}
document.cookie = name + '=' + value + expires + '; path=/';
}
function loadLoadingPage() {
// 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
// 请求 loading.html
xhr.open('GET', './load.html', true);
// 设置响应类型为 HTML
xhr.responseType = 'document';
// 当请求成功时
xhr.onload = function() {
// 获取响应的 HTML 代码
var html = xhr.response.documentElement;
// 插入到页面中
var myNode = document.createElement("div");
myNode.innerHTML =html.innerHTML
document.body.appendChild(myNode);
};
// 发送请求
xhr.send();
}
这段代码是一个 JavaScript 函数，用于获取指定名称的 cookie 的值。
具体来说，函数的参数 name 表示要获取的 cookie 的名称。函数首先将整个 cookie 字符串保存在变量 value 中，并将其前面加上 '; '，这是为了在下一步拆分 cookie 时，防止 cookie 名称出现在 cookie 值中而导致解析错误。然后，函数调用 String.split() 方法，将 '; ' + name + '=' 作为分隔符将整个 cookie 字符串拆分为两部分，即 cookie 名称和 cookie 值。如果成功拆分，函数将返回 cookie 值部分，同时用 String.split() 方法将其后面的 ';' 截去，即去除 cookie 值后面的任何不必要的字符。如果未找到指定名称的 cookie，则函数将返回 undefined。
load页面
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="https://browser.sentry-cdn.com/6.16.1/bundle.min.js"
integrity="sha384-WkFzsrcXKeJ3KlWNXojDiim8rplIj1RPsCbuv7dsLECoXY8C6Cx158CMgl+O+QKW" crossorigin="anonymous">
</script>
<script>
Sentry.init({
dsn: 'https://10cb99dd04764448908fcd64cb9ba61d@o370135.ingest.sentry.io/6093759',
environment: document.location.host,
release: 'app@v2.0.1'
});
Sentry.setUser({
"id": window.SETTINGS ? window.SETTINGS.deviceId : ''
});
Sentry.setContext("SETTINGS", window.SETTINGS || {});
if ('plugins' in navigator && navigator.plugins.length > 0) {
var pluginNames = [];
for (var i = 0; i < navigator.plugins.length; i++) {
pluginNames.push(navigator.plugins[i].name);
}
Sentry.setContext('BrowserPlugins', pluginNames);
}
</script>
<script src="/pwa/js/browser.id.js?id=eda784545780f80b9e53"></script>
<style>
body {
height: 100vh;
margin: 0;
padding: 0;
}
.loader-wrapper {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="loader-wrapper">
<span class="loader"></span>
</div>
</body>
</html>
<style>
.loader {
width: 16px;
height: 16px;
position: absolute;
left: -32px;
border-radius: 50%;
color: #000;
background: currentColor;
box-shadow: 32px 0, -32px 0, 64px 0;
}
.loader::after {
content: '';
position: absolute;
left: -32px;
top: 0;
width: 16px;
height: 16px;
border-radius: 10px;
background: #FF3D00;
animation: move 3s linear infinite alternate;
}
@keyframes move {
0%,
5% {
left: -32px;
width: 16px;
}
15%,
20% {
left: -32px;
width: 48px;
}
30%,
35% {
left: 0px;
width: 16px;
}
45%,
50% {
left: 0px;
width: 48px;
}
60%,
65% {
left: 32px;
width: 16px;
}
75%,
80% {
left: 32px;
width: 48px;
}
95%,
100% {
left: 64px;
width: 16px;
}
}
</style>
浙公网安备 33010602011771号