Spaces:
Running
Running
| <html lang="ja"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>HTML Viewer</title> | |
| <style> | |
| .hidden { display: none; } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>HTML Viewer</h1> | |
| <label for="modeSelect">モードを選択：</label> | |
| <select id="modeSelect"> | |
| <option value="html">HTML表示モード</option> | |
| <option value="url">URLのiframe表示モード</option> | |
| </select> | |
| <br> | |
| <label for="displayTarget">表示先を選択：</label> | |
| <select id="displayTarget"> | |
| <option value="blob">blobURL</option> | |
| <option value="blank">about:blank</option> | |
| <option value="pip">PiPウィンドウ</option> | |
| </select> | |
| <div id="htmlMode"> | |
| <textarea id="htmlInput" placeholder="ここにHTMLを入力してください" rows="10" cols="50"><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> | |
| </div> | |
| <div id="urlMode" class="hidden"> | |
| <input id="urlInput" type="text" placeholder="表示するURLを入力してください" list="urlOptions" size="50"> | |
| <datalist id="urlOptions"> | |
| <option value="https://gooberdash.winterpixel.io/"> | |
| <option value="https://inv.nadeko.net/"> | |
| <option value="https://gpt-free-api-alu.hf.space/jp/"> | |
| <option value="https://gpt-free-api-interstellar.hf.space/"> | |
| </datalist> | |
| </div> | |
| <button id="displayButton">表示</button> | |
| <button onclick="location.replace('index.html');">close</button> | |
| <button id="clearButton">クリア</button> | |
| <p id="errorMessage" style="color: red;"></p> | |
| <script> | |
| const modeSelect = document.getElementById('modeSelect'); | |
| const displayTarget = document.getElementById('displayTarget'); | |
| const htmlMode = document.getElementById('htmlMode'); | |
| const urlMode = document.getElementById('urlMode'); | |
| const displayButton = document.getElementById('displayButton'); | |
| const clearButton = document.getElementById('clearButton'); | |
| const errorMessage = document.getElementById('errorMessage'); | |
| modeSelect.addEventListener('change', () => { | |
| if (modeSelect.value === 'html') { | |
| htmlMode.classList.remove('hidden'); | |
| urlMode.classList.add('hidden'); | |
| } else { | |
| htmlMode.classList.add('hidden'); | |
| urlMode.classList.remove('hidden'); | |
| } | |
| }); | |
| displayButton.addEventListener('click', async () => { | |
| errorMessage.textContent = ''; | |
| const target = displayTarget.value; | |
| let content = ''; | |
| if (modeSelect.value === 'html') { | |
| content = document.getElementById('htmlInput').value.trim(); | |
| if (!content) { | |
| errorMessage.textContent = 'HTMLを入力してください。'; | |
| return; | |
| } | |
| } else { | |
| const url = document.getElementById('urlInput').value.trim(); | |
| if (!url) { | |
| errorMessage.textContent = 'URLを入力してください。'; | |
| return; | |
| } | |
| content = `<!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="${url}" style="width:100vw;height:100vh;border:none;"></iframe></html>`; | |
| } | |
| try { | |
| if (target === 'blob') { | |
| const blob = new Blob([content], { type: 'text/html' }); | |
| const url = URL.createObjectURL(blob); | |
| const newWindow = window.open(url); | |
| if (!newWindow) throw new Error('ポップアップがブロックされています。'); | |
| } else if (target === 'blank') { | |
| const newWindow = window.open('about:blank'); | |
| if (newWindow) { | |
| newWindow.document.write(content); | |
| newWindow.document.close(); | |
| } else throw new Error('ポップアップがブロックされています。'); | |
| } else if (target === 'pip') { | |
| const pipWindow = await documentPictureInPicture.requestWindow(); | |
| pipWindow.document.body.innerHTML = content; | |
| } | |
| } catch (e) { | |
| errorMessage.textContent = 'エラーが発生しました: ' + e.message; | |
| } | |
| }); | |
| clearButton.addEventListener('click', () => { | |
| if (modeSelect.value === 'html') { | |
| document.getElementById('htmlInput').value = ''; | |
| } else { | |
| document.getElementById('urlInput').value = ''; | |
| } | |
| errorMessage.textContent = ''; | |
| }); | |
| </script> | |
| </body> | |
| </html> | |