Hugging Face's logo

Spaces:
public-soiz1
/
about-blank
Running

App Files Community
GPTfree api commited on
Commit
c3087e1
·
verified ·
1 Parent(s): 4d31f34

Create cl

Browse files
Files changed (1) hide show
  1. cl +136 -0
cl ADDED
@@ -0,0 +1,136 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ja">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>HTML Viewer</title>
7
+ <style>
8
+ .hidden {
9
+ display: none;
10
+ }
11
+ </style>
12
+ </head>
13
+ <body>
14
+ <h1>HTML Viewer</h1>
15
+ <label for="modeSelect">モードを選択：</label>
16
+ <select id="modeSelect">
17
+ <option value="html">HTML表示モード</option>
18
+ <option value="url">URLのiframe表示モード</option>
19
+ </select>
20
+ <br>
21
+ <label for="displayTarget">表示先を選択：</label>
22
+ <select id="displayTarget">
23
+ <option value="blob">blobURL</option>
24
+ <option value="blank">about:blank</option>
25
+ </select>
26
+
27
+ <div id="htmlMode">
28
+ <textarea id="htmlInput" placeholder="ここにHTMLを入力してください" rows="10" cols="50"><!DOCTYPE html><html lang="ja"><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><style>html,body{margin:0;padding:0;overflow:hidden;width:100vw;height:100vh}</style><iframe src="https://gooberdash.winterpixel.io/" style="width:100vw;height:100vh;border:none;display:block;margin:0;padding:0"></iframe></textarea><br>
29
+ </div>
30
+
31
+ <div id="urlMode" class="hidden">
32
+ <input id="urlInput" type="text" placeholder="表示するURLを入力してください" list="urlOptions" size="50">
33
+ <datalist id="urlOptions">
34
+ <option value="https://gooberdash.winterpixel.io">
35
+ <option value="https://inv.nadeko.net/">
36
+ </datalist>
37
+ </div>
38
+
39
+ <button id="displayButton">表示</button>
40
+ <button id="clearButton">クリア</button>
41
+ <p id="errorMessage" style="color: red;"></p>
42
+
43
+ <script>
44
+ const modeSelect = document.getElementById('modeSelect');
45
+ const displayTarget = document.getElementById('displayTarget');
46
+ const htmlMode = document.getElementById('htmlMode');
47
+ const urlMode = document.getElementById('urlMode');
48
+ const displayButton = document.getElementById('displayButton');
49
+ const clearButton = document.getElementById('clearButton');
50
+ const errorMessage = document.getElementById('errorMessage');
51
+
52
+ modeSelect.addEventListener('change', () => {
53
+ if (modeSelect.value === 'html') {
54
+ htmlMode.classList.remove('hidden');
55
+ urlMode.classList.add('hidden');
56
+ } else if (modeSelect.value === 'url') {
57
+ htmlMode.classList.add('hidden');
58
+ urlMode.classList.remove('hidden');
59
+ }
60
+ });
61
+
62
+ displayButton.addEventListener('click', () => {
63
+ errorMessage.textContent = '';
64
+ const target = displayTarget.value;
65
+
66
+ if (modeSelect.value === 'html') {
67
+ const htmlContent = document.getElementById('htmlInput').value;
68
+
69
+ if (!htmlContent.trim()) {
70
+ errorMessage.textContent = 'HTMLを入力してください。';
71
+ return;
72
+ }
73
+
74
+ try {
75
+ if (target === 'blob') {
76
+ const blob = new Blob([htmlContent], { type: 'text/html' });
77
+ const url = URL.createObjectURL(blob);
78
+ const newWindow = window.open(url);
79
+ if (!newWindow) {
80
+ errorMessage.textContent = '新しいタブを開けませんでした。ポップアップがブロックされている可能性があります。';
81
+ }
82
+ } else if (target === 'blank') {
83
+ const newWindow = window.open('about:blank');
84
+ if (newWindow) {
85
+ newWindow.document.write(htmlContent);
86
+ newWindow.document.close();
87
+ } else {
88
+ errorMessage.textContent = '新しいタブを開けませんでした。ポップアップがブロックされている可能性があります。';
89
+ }
90
+ }
91
+ } catch (e) {
92
+ errorMessage.textContent = 'エラーが発生しました: ' + e.message;
93
+ }
94
+ } else if (modeSelect.value === 'url') {
95
+ const url = document.getElementById('urlInput').value;
96
+
97
+ if (!url.trim()) {
98
+ errorMessage.textContent = 'URLを入力してください。';
99
+ return;
100
+ }
101
+
102
+ try {
103
+ const iframeHtml = `<!DOCTYPE html><html lang="ja"><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Iframe Viewer</title><style>html,body{margin:0;padding:0;overflow:hidden;width:100vw;height:100vh}</style><iframe src="${url}" style="width:100vw;height:100vh;border:none;display:block;margin:0;padding:0"></iframe></html>`;
104
+ if (target === 'blob') {
105
+ const blob = new Blob([iframeHtml], { type: 'text/html' });
106
+ const blobUrl = URL.createObjectURL(blob);
107
+ const newWindow = window.open(blobUrl);
108
+ if (!newWindow) {
109
+ errorMessage.textContent = '新しいタブを開けませんでした。ポップアップがブロックされている可能性があります。';
110
+ }
111
+ } else if (target === 'blank') {
112
+ const newWindow = window.open('about:blank');
113
+ if (newWindow) {
114
+ newWindow.document.write(iframeHtml);
115
+ newWindow.document.close();
116
+ } else {
117
+ errorMessage.textContent = '新しいタブを開けませんでした。ポップアップがブロックされている可能性があります。';
118
+ }
119
+ }
120
+ } catch (e) {
121
+ errorMessage.textContent = 'エラーが発生しました: ' + e.message;
122
+ }
123
+ }
124
+ });
125
+
126
+ clearButton.addEventListener('click', () => {
127
+ if (modeSelect.value === 'html') {
128
+ document.getElementById('htmlInput').value = '';
129
+ } else if (modeSelect.value === 'url') {
130
+ document.getElementById('urlInput').value = '';
131
+ }
132
+ errorMessage.textContent = '';
133
+ });
134
+ </script>
135
+ </body>
136
+ </html>