Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 13.01.2019, 09:12
Аватар для m~r.Nemo
Аспирант
Отправить личное сообщение для m~r.Nemo Посмотреть профиль Найти все сообщения от m~r.Nemo
 
Регистрация: 27.10.2012
Сообщений: 80

laimas,
Если чужой домен даёт доступ, это возможно сделать?

Какую форму? Какой сервер? я спрашиваю про возможность просто показать страницу в поле
Ответить с цитированием
  #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.
Ответить с цитированием
  #13 (permalink)  
Старый 13.01.2019, 14:20
Аватар для m~r.Nemo
Аспирант
Отправить личное сообщение для m~r.Nemo Посмотреть профиль Найти все сообщения от m~r.Nemo
 
Регистрация: 27.10.2012
Сообщений: 80

Malleys,
Ввёл, и пусто, даже поля для ввода пропали
Ответить с цитированием
  #14 (permalink)  
Старый 13.01.2019, 16:06
Аватар для m~r.Nemo
Аспирант
Отправить личное сообщение для m~r.Nemo Посмотреть профиль Найти все сообщения от m~r.Nemo
 
Регистрация: 27.10.2012
Сообщений: 80

Народ, кто поможет поправить скрипт?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Просмотр HTML кода</title>
<style>
html, body { margin: 0; padding: 20px; font-family: Arial, sans-serif; font-size: 16px; }
input { border: 1px solid #008000; }
button { display: inline-block; min-width: 100px; margin: 5px; padding: 8px; }
textarea { width: 500px; height: 200px; border: 1px solid #008000; }
#top { height: 120px; }
#bottom { height: 100%; margin-top: 10px; padding-top: 10px; }
</style>
</head>
<html>9
<body>
<div id="top">
Введите URL:<br/>
<input type="url" id="url" placeholder="http:// или https://"><br/>
<input type="text" id="data"><br/>
<button id="get">GET</button> <button id="post">POST</button>
</div>
<div id="bottom">
<textarea id="output"></textarea><br/>
<input type="button" value="Скрыть">
</div>
<script>
var cors_api_url = 'https://cors-anywhere.herokuapp.com/';
function doCORSRequest(options, printResult) {
var x = new XMLHttpRequest();
x.open(options.method, cors_api_url + options.url);
x.onload = x.onerror = function() {
printResult(
options.method + ' ' + options.url + 'n' +
        x.status + ' ' + x.statusText + 'nn' +
(x.responseText || '')
);
};
if (/^POST/i.test(options.method)) {
      x.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
}
x.send(options.data);
}
// Bind event
(function() {
var urlField = document.getElementById('url');
var dataField = document.getElementById('data');
var outputField = document.getElementById('output');
    document.getElementById('get').onclick =
    document.getElementById('post').onclick = function(e) {
e.preventDefault();
doCORSRequest({
method: this.id === 'post' ? 'POST' : 'GET',
url: urlField.value,
data: dataField.value
}, function printResult(result) {
outputField.value = result;
});
};
})();
if (typeof console === 'object') {
console.log('// To test a local CORS Anywhere server, set cors_api_url. For example:');
console.log('cors_api_url = "http://localhost:8080/"');
}
</script>
</body>
</html>


Я просто не могу понять, причём тут поле для даты и эти post get, как их убрать и заменить на кнопку submit? И как сделать чтобы див с техтареа был скрыт появлялся только после нажатия на submit, а после нажатия на button очищались поля и див с техтареа скрывался?

Последний раз редактировалось m~r.Nemo, 13.01.2019 в 16:08.
Ответить с цитированием
  #15 (permalink)  
Старый 13.01.2019, 18:23
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от m~r.Nemo
Ввёл, и пусто, даже поля для ввода пропали
Проверил в последних версиях Crome, Firefox, Edge. Возможно вам нужно обновление, или скачайте себе современный браузер(не IE)! https://browsehappy.com/

Сообщение от m~r.Nemo
И как сделать чтобы див с техтареа был скрыт появлялся только после нажатия на submit, а после нажатия на button очищались поля и див с техтареа скрывался?
Смотрите пост №12 выше, добавил кнопку сброса

Последний раз редактировалось Malleys, 13.01.2019 в 18:44.
Ответить с цитированием
  #16 (permalink)  
Старый 13.01.2019, 21:28
Аватар для m~r.Nemo
Аспирант
Отправить личное сообщение для m~r.Nemo Посмотреть профиль Найти все сообщения от m~r.Nemo
 
Регистрация: 27.10.2012
Сообщений: 80

Malleys,
Возможно дело в том, что я пытаюсь посмотреть с сенсорного телефона андроида, через хром? Когда то лет ...надцать назад, когда я только начинал пытатся понять html css, это для меня было огромной проблемой посмотреть код, с кнопочной нокия с экраном 128 х 160 пикселей, потом как то нашёл сайт http://bertal.ru какое то время пользовался этим сервисом, потом такая необходимость отпала с доступностью сенсоров, нажал на экран выделил текст или код и всё, но идея облегчить процесс новичкам и замутить простенький подобный сервис, меня не оставляла...
Хотелось бы чтобы можно было пользоваться и с любого телефона (как видно из названия темы), и с компа, правда ИЕ настолько устарел что никому не интересен, главное чтобы с нормальных браузеров работало.
Ответить с цитированием
  #17 (permalink)  
Старый 13.01.2019, 21:57
Аватар для m~r.Nemo
Аспирант
Отправить личное сообщение для m~r.Nemo Посмотреть профиль Найти все сообщения от m~r.Nemo
 
Регистрация: 27.10.2012
Сообщений: 80

Сообщение от Malleys Посмотреть сообщение
Смотрите пост №12 выше, добавил кнопку сброса
Ну как бы эта не очень то и нужна на главной, удалить 10-20 символов из поля для адреса не сложно, а вот после полученого километрового кода необходима.
Ответить с цитированием
  #18 (permalink)  
Старый 15.01.2019, 06:32
Аватар для m~r.Nemo
Аспирант
Отправить личное сообщение для m~r.Nemo Посмотреть профиль Найти все сообщения от m~r.Nemo
 
Регистрация: 27.10.2012
Сообщений: 80

Malleys,
Всё равно с тела не работает, просто очищается поле для ввода адреса и всё
Ответить с цитированием
  #19 (permalink)  
Старый 15.01.2019, 08:41
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от m~r.Nemo
Всё равно с тела не работает
Какая версия браузера? https://2ip.ru/

UPD
Сообщение от m~r.Nemo
Операционная система:
Android 4.4.2 Android 4.4.2
Ваш браузер:
Chrome 40.0.2214.109
Смотрите UPD3 выше https://javascript.ru/forum/showthre...079#post501902

А обновить браузер никак? А то уже пошли 70 версии.

Последний раз редактировалось Malleys, 15.01.2019 в 10:06.
Ответить с цитированием
  #20 (permalink)  
Старый 15.01.2019, 09:12
Аватар для m~r.Nemo
Аспирант
Отправить личное сообщение для m~r.Nemo Посмотреть профиль Найти все сообщения от m~r.Nemo
 
Регистрация: 27.10.2012
Сообщений: 80

Операционная система:
Android 4.4.2 Android 4.4.2
Ваш браузер:
Chrome 40.0.2214.109
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вывод кусков HTML кода с одного файла JS wlad2 Общие вопросы Javascript 16 04.01.2011 11:52
С помощью JS добавить к ссылкам картинку в CSS wlad2 Элементы интерфейса 7 16.10.2010 23:44
Вакансия: Front-end разработчик (HTML, CSS, JS, Ajax, jQuery) ivankov Работа 0 05.10.2010 19:00
Html метки + div + JS boltayka Events/DOM/Window 1 07.09.2009 17:21
Как с помощью JS "на-лету" менять часть HTML кода greendoc Общие вопросы Javascript 2 18.03.2008 20:43