Показать сообщение отдельно
  #12 (permalink)  
Старый 13.01.2019, 09:25
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

<form onsubmit="process(this); return false;">
	<input type="url" placeholder="введи URL" autocomplete="url" name="url" required list="urls">
	<datalist id="urls">
		<option>https://google.com/</option>
		<option>https://stackoverflow.com/</option>
		<option>https://yandex.ru/</option>
		<option>https://wikipedia.org/</option>
	</datalist>
	<button type="submit">Запуск!</button>
	<button type="reset">Сброс</button>
	<textarea hidden placeholder="здесь будет ответ"></textarea>
</form>
<script>

	function process(form) {
		const textarea = form.querySelector("textarea");
		const resetButton = form.querySelector("[type='reset']");
		resetButton.onclick = () => textarea.hidden = true;
		textarea.hidden = false;
		textarea.value = "Загрузка...";
		
		fetch(`https://cors-anywhere.herokuapp.com/${form.querySelector("[type='url']").value}`)
			.then(response => response.text())
			.then(text => {
				textarea.value = text;
			})
			.catch(error => {
				textarea.value = error.message;
			})
		;
	}
	
</script>
<style>
	form {
		display: grid;
		grid-gap: 1em;
		grid-template-columns: 1fr auto auto;
	}
	textarea {
		grid-row-start: 2;
		grid-column: span 3;
		min-height: 30em;
	}
</style>


попробуйте, например, этот адрес из списка или свой какой-либо

UPD Добавил CORS Proxy, теперь возможно скачивать любой сайт, удалите из кода https://cors-anywhere.herokuapp.com/ если вам нужен чистый запрос.

UPD2 Добавил кнопку сброса

UPD3 Для немного старых браузеров...

<form onsubmit="process(this); return false;">
	<input type="url" placeholder="введи URL" autocomplete="url" name="url" required list="urls">
	<datalist id="urls">
		<option>https://google.com/</option>
		<option>https://stackoverflow.com/</option>
		<option>https://yandex.ru/</option>
		<option>https://wikipedia.org/</option>
	</datalist>
	<button type="submit">Запуск!</button>
	<button type="reset">Сброс</button>
	<textarea hidden placeholder="здесь будет ответ"></textarea>
</form>
<style>
	
form {
	display: flex;
	flex-wrap: wrap;
}

input:first-of-type {
	flex: 1;
}

textarea {
	flex: 100%;
	min-height: 30em;
}

</style>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default%2Cfetch"></script>
<script>

function process(form) {
	var textarea = form.querySelector("textarea");
	var resetButton = form.querySelector("[type='reset']");
	resetButton.onclick = function() { textarea.hidden = true }
	textarea.hidden = false;
	textarea.value = "Загрузка...";
	
	fetch("https://cors-anywhere.herokuapp.com/" + form.querySelector("[type='url']").value)
		.then(function(response) { return response.text() })
		.then(function(text) {
			textarea.value = text;
		})
		.catch(function(error) {
			textarea.value = error.message;
		})
	;
}

</script>

Последний раз редактировалось Malleys, 15.01.2019 в 09:58.
Ответить с цитированием