about-blank

Running

about-blank / cl

GPTfree api

Update cl

75d1d9b verified 7 months ago

6.79 kB

	<!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>
	</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 if (modeSelect.value === 'url') {
	htmlMode.classList.add('hidden');
	urlMode.classList.remove('hidden');
	}
	});

	displayButton.addEventListener('click', () => {
	errorMessage.textContent = '';
	const target = displayTarget.value;

	if (modeSelect.value === 'html') {
	const htmlContent = document.getElementById('htmlInput').value;

	if (!htmlContent.trim()) {
	errorMessage.textContent = 'HTMLを入力してください。';
	return;
	}

	try {
	if (target === 'blob') {
	const blob = new Blob([htmlContent], { type: 'text/html' });
	const url = URL.createObjectURL(blob);
	const newWindow = window.open(url);
	if (!newWindow) {
	errorMessage.textContent = '新しいタブを開けませんでした。ポップアップがブロックされている可能性があります。';
	}
	} else if (target === 'blank') {
	const newWindow = window.open('about:blank');
	if (newWindow) {
	newWindow.document.write(htmlContent);
	newWindow.document.close();
	} else {
	errorMessage.textContent = '新しいタブを開けませんでした。ポップアップがブロックされている可能性があります。';
	}
	}
	} catch (e) {
	errorMessage.textContent = 'エラーが発生しました: ' + e.message;
	}
	} else if (modeSelect.value === 'url') {
	const url = document.getElementById('urlInput').value;

	if (!url.trim()) {
	errorMessage.textContent = 'URLを入力してください。';
	return;
	}

	try {
	const iframeHtml = `<!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;display:block;margin:0;padding:0"></iframe></html>`;
	if (target === 'blob') {
	const blob = new Blob([iframeHtml], { type: 'text/html' });
	const blobUrl = URL.createObjectURL(blob);
	const newWindow = window.open(blobUrl);
	if (!newWindow) {
	errorMessage.textContent = '新しいタブを開けませんでした。ポップアップがブロックされている可能性があります。';
	}
	} else if (target === 'blank') {
	const newWindow = window.open('about:blank');
	if (newWindow) {
	newWindow.document.write(iframeHtml);
	newWindow.document.close();
	} else {
	errorMessage.textContent = '新しいタブを開けませんでした。ポップアップがブロックされている可能性があります。';
	}
	}
	} catch (e) {
	errorMessage.textContent = 'エラーが発生しました: ' + e.message;
	}
	}
	});

	clearButton.addEventListener('click', () => {
	if (modeSelect.value === 'html') {
	document.getElementById('htmlInput').value = '';
	} else if (modeSelect.value === 'url') {
	document.getElementById('urlInput').value = '';
	}
	errorMessage.textContent = '';
	});
	</script>
	</body>
	</html>