Random/Webpage_Code_Copier.html at main · ryder7223/Random · 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
<!DOCTYPE html>
<html>
<head>
  <title>Fetching and Previewing Code</title>
</head>
<body>
  <label for="urlInput">Enter URL:</label>
  <input type="text" id="urlInput" placeholder="Enter URL here">
  <button onclick="fetchAndDisplayCode()">Fetch Code</button>
  <div>
    <p id="loadingMessage" style="display: none;">Fetching code...</p>
    <textarea id="codeDisplay" rows="10" cols="50" readonly></textarea>
  </div>
  <iframe id="previewFrame" width="100%" height="400" style="display: none;"></iframe>

  <script>
    async function fetchAndDisplayCode() {
      const urlInput = document.getElementById("urlInput");
      const url = urlInput.value.trim();

      if (!url) {
        alert("Please enter a valid URL.");
        return;
      }

      // Show "Fetching code..." message
      const loadingMessage = document.getElementById("loadingMessage");
      loadingMessage.style.display = "block";

      try {
        const response = await fetch(url);

        if (!response.ok) {
          throw new Error("Failed to retrieve the URL. Status Code: " + response.status);
        }

        // Process the response as a stream to avoid memory overload
        const reader = response.body.getReader();
        let code = '';
        while (true) {
          const { done, value } = await reader.read();

          if (done) {
            break;
          }

          code += new TextDecoder().decode(value);
        }

        // Hide "Fetching code..." message
        loadingMessage.style.display = "none";

        // Display the fetched code in the textarea
        const codeDisplay = document.getElementById("codeDisplay");
        codeDisplay.value = code;

        // Create a Blob with the code and set iframe source to a URL of the Blob
        const blob = new Blob([code], { type: 'text/html' });
        const previewFrame = document.getElementById("previewFrame");
        previewFrame.src = URL.createObjectURL(blob);
        previewFrame.style.display = "block";
      } catch (error) {
        // Hide "Fetching code..." message
        loadingMessage.style.display = "none";

        // Display an error message in the textarea
        const codeDisplay = document.getElementById("codeDisplay");
        codeDisplay.value = "An error occurred during the request: " + error.message;
      }
    }
  </script>
</body>
</html>