CFWorkers/URL_Code_Viewer.js at main · FiorenMas/CFWorkers · 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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  const url = new URL(request.url)

  if (url.pathname === '/') {
    return new Response(renderHTML(), {
      headers: { 'Content-Type': 'text/html; charset=utf-8' }
    })
  } else if (url.pathname === '/fetch') {
    const targetUrl = url.searchParams.get('url')
    const type = url.searchParams.get('type') || 'html'

    if (!targetUrl) {
      return new Response('请输入一个网址', { status: 400 })
    }

    try {
      const res = await fetch(targetUrl)
      const contentType = res.headers.get('Content-Type')

      if (type === 'html') {
        const html = await res.text()
        return new Response(html, {
          headers: { 'Content-Type': 'text/plain; charset=utf-8' }
        })
      } else if (type === 'js' && contentType.includes('javascript')) {
        const js = await res.text()
        return new Response(js, {
          headers: { 'Content-Type': 'text/plain; charset=utf-8' }
        })
      } else if (type === 'css' && contentType.includes('css')) {
        const css = await res.text()
        return new Response(css, {
          headers: { 'Content-Type': 'text/plain; charset=utf-8' }
        })
      } else {
        return new Response('无法获取指定内容', { status: 400 })
      }
    } catch (err) {
      return new Response('获取内容失败', { status: 500 })
    }
  } else {
    return new Response('404 Not Found', { status: 404 })
  }
}

function renderHTML() {
  return `
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>URL Code Viewer</title>
      <style>
        body {
          font-family: Arial, sans-serif;
          margin: 20px;
        }
        input, select {
          padding: 10px;
          margin-bottom: 10px;
          width: 300px;
        }
        #code {
          width: 100%;
          height: 300px;
          white-space: pre-wrap;
          background-color: #f4f4f4;
          padding: 10px;
          overflow: auto;
        }
        button {
          padding: 10px 15px;
          cursor: pointer;
        }
      </style>
    </head>
    <body>

    <h2>输入网址，获取 HTML、JS 或 CSS 代码</h2>
    <input id="urlInput" type="text" placeholder="输入网址" />
    <select id="typeSelect">
      <option value="html">HTML</option>
      <option value="js">JS</option>
      <option value="css">CSS</option>
    </select>
    <button id="fetchBtn">获取代码</button>
    <button id="copyBtn">一键复制</button>

    <pre id="code">代码将显示在这里...</pre>

    <script>
      const fetchBtn = document.getElementById('fetchBtn')
      const copyBtn = document.getElementById('copyBtn')
      const urlInput = document.getElementById('urlInput')
      const typeSelect = document.getElementById('typeSelect')
      const codeDisplay = document.getElementById('code')

      // 通过 Cloudflare Worker 获取内容
      fetchBtn.addEventListener('click', async () => {
        const url = urlInput.value
        const type = typeSelect.value
        if (!url) {
          alert('请输入网址')
          return
        }

        try {
          const response = await fetch(\`/fetch?url=\${encodeURIComponent(url)}&type=\${type}\`)
          if (!response.ok) {
            throw new Error('获取失败')
          }
          const text = await response.text()
          codeDisplay.textContent = text
        } catch (error) {
          codeDisplay.textContent = '获取内容失败'
        }
      })

      // 一键复制功能
      copyBtn.addEventListener('click', () => {
        const text = codeDisplay.textContent
        navigator.clipboard.writeText(text).then(() => {
          alert('代码已复制！')
        }).catch(err => {
          alert('复制失败')
        })
      })
    </script>

    </body>
    </html>
  `
}