Spaces:
Running
Running
File size: 4,789 Bytes
dc1116c e524741 60a661f e524741 95116ef e524741 dc1116c e524741 95116ef e524741 60a661f e524741 95116ef 60a661f 95116ef e524741 60a661f e524741 60a661f e524741 60a661f dc1116c 60a661f e524741 60a661f e524741 60a661f e524741 60a661f e524741 dc1116c e524741 |
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 |
<!DOCTYPE html>
<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"><!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>
</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>
|