302/index.html at main · DiamondYuan/302 · GitHub

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>302</title>
</head>
<style type="text/css">
  html,
  body {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
  }

  body {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #url {
    background: #fff;
    border: 1px solid #dfe1e5;
    box-shadow: none;
    border-radius: 4px;
    z-index: 3;
    padding: 8px 24px;
    width: 600px;
    font-size: 16px;
    line-height: 24px;
  }

  #copy {
    background: #0170fe;
    color: white;
    border: 1px solid #0170fe;
    box-shadow: none;
    padding: 8px 24px;
    border-radius: 4px;
    height: auto;
    cursor: pointer;
    font-size: 16px;
  }

  #show {
    color: rgba(0, 0, 0, .85);
    margin-top: 8px;
    word-break: break-all;
    width: 600px;
    font-size: 16px;
  }
</style>

<body>
  <div id="container">
    <input id="url" placeholder="请输入你要跳转的网址"></input>
    <button id="copy">拷贝</button>
    <div id="show"></div>
  </div>
</body>

<script type="text/javascript">
  function init() {
    //解析当前网址，储存到一个叫做 current 的变量。
    const current = new URL(window.location.href);
    //获取输入框
    const input = document.getElementById('url');

    //监听输入框的输入
    input.addEventListener('input', e => {
      //获取输入框的内容，设置到 current 的 location 参数
      current.searchParams.set('location', e.target.value);
      //更新永久链接
      document.getElementById('show').innerText = `永久连接: ${current.toString()}`
    });

    const button = document.getElementById('copy');
    //监听拷贝按钮
    button.addEventListener('click', () => {
      document.execCommand('copy');
    });

    document.addEventListener('copy', function (e) {
      e.clipboardData.setData('text/plain', current.toString());
      e.preventDefault();
    });

    for (const queryName of ['location', 'goto']) {
      if (current.searchParams.get(queryName)) {
        window.location.href = current.searchParams.get(queryName)
        setTimeout(() => {
          window.close();
        }, 2000);
        return
      }
    }
  }
  init()
</script>

</html>