主站和备选站的自动跳转

发表于 分类于

需求：默认访问 feipig.fun，否则访问博客园对应地址。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>自动跳转页面</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            display: flex;
            flex-direction: column; /* 垂直排列 */
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f7f7f7;
        }
        p {
            font-size: 1em;
            color: #666;
        }
        h1 {
            font-size: 2em;
            color: #333;
            animation: fadeIn 1.5s ease-in-out;
        }
        @keyframes fadeIn {
            0% { opacity: 0; transform: translateY(-20px); }
            100% { opacity: 1; transform: translateY(0); }
        }
    </style>
</head>
<body>
    <!-- https://acc8226.pages.dev/mypage/jumpJiejian -->
    <h1>跳转中...</h1>
    <p id="no-js-message">如果页面没有自动跳转，请<a href="https://feipig.fun">点击这里</a>。</p>
    <script>
        // 尝试隐藏无JavaScript消息
        document.getElementById('no-js-message').style.display = 'none'

        window.onload = function() {
            var url1 = 'https://feipig.fun//4c2b72aaa7d0'// 时好时坏 
            var url2 = 'https://www.cnblogs.com/elaa/p/17994004'// 博客园雄起

            // 创建一个Image对象来测试网站图标的加载情况
            var img = new Image();
            img.onload = function() {
                // 图标加载成功，跳转到原网站
                window.location.href = url1;
            };
            img.onerror = function() {
                // 图标加载失败，跳转到备用网站
                window.location.href = url2;
            };
            img.src = 'https://feipig.fun/images/favicon-16x16.ico'; // 开始加载图标          
        }
    </script>
</body>
</html>

通过 HTML/css/JS在线压缩工具 - 代码工具 - W3Cschool 可以进行压缩，并上传到又拍云。

压缩后的代码如下：

1
<!DOCTYPE html><html lang=zh-CN><head><meta charset=UTF-8><title>自动跳转页面</title><style>body{font-family:Arial,sans-serif;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100vh;margin:0;background-color:#f7f7f7}p{font-size:1em;color:#666}h1{font-size:2em;color:#333;animation:fadeIn 1.5s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(-20px)}100%{opacity:1;transform:translateY(0)}}</style><body><h1>跳转中...</h1><p id=no-js-message>如果页面没有自动跳转，请<a href=https://feipig.fun>点击这里</a>。</p><script>document.getElementById("no-js-message").style.display="none",window.onload=function(){var n="https://feipig.fun/zh-cn/4c2b72aaa7d0",o="https://www.cnblogs.com/elaa/p/17994004",e=new Image;e.onload=function(){window.location.href=n},e.onerror=function(){window.location.href=o},e.src="https://feipig.fun/images/favicon-16x16.ico"};</script>

压缩报告: Original size: 1,720. Minified size: 881. Savings: 839 (48.78%).

测试访问地址 http://acc8226.test.upcdn.net ，很完美。

特点：通过 img.src 这种形式还完美避免了跨域的问题。