13.01.2019, 09:12
|
 |
Аспирант
|
|
Регистрация: 27.10.2012
Сообщений: 80
|
|
|
laimas,
Если чужой домен даёт доступ, это возможно сделать?
Какую форму? Какой сервер? я спрашиваю про возможность просто показать страницу в поле
|
|
13.01.2019, 09:25
|
 |
Профессор
|
|
Регистрация: 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.01.2019, 14:20
|
|
Аспирант
|
|
Регистрация: 27.10.2012
Сообщений: 80
|
|
|
Malleys,
Ввёл, и пусто, даже поля для ввода пропали
|
|
13.01.2019, 16:06
|
|
Аспирант
|
|
Регистрация: 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.
|
|
13.01.2019, 18:23
|
|
Профессор
|
|
Регистрация: 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.
|
|
13.01.2019, 21:28
|
|
Аспирант
|
|
Регистрация: 27.10.2012
Сообщений: 80
|
|
Malleys,
Возможно дело в том, что я пытаюсь посмотреть с сенсорного телефона андроида, через хром? Когда то лет ...надцать назад, когда я только начинал пытатся понять html css, это для меня было огромной проблемой посмотреть код, с кнопочной нокия с экраном 128 х 160 пикселей, потом как то нашёл сайт http://bertal.ru какое то время пользовался этим сервисом, потом такая необходимость отпала с доступностью сенсоров, нажал на экран выделил текст или код и всё, но идея облегчить процесс новичкам и замутить простенький подобный сервис, меня не оставляла...
Хотелось бы чтобы можно было пользоваться и с любого телефона (как видно из названия темы), и с компа, правда ИЕ настолько устарел что никому не интересен, главное чтобы с нормальных браузеров работало.
|
|
13.01.2019, 21:57
|
|
Аспирант
|
|
Регистрация: 27.10.2012
Сообщений: 80
|
|
Сообщение от Malleys
|
|
Смотрите пост №12 выше, добавил кнопку сброса
|
Ну как бы эта не очень то и нужна на главной, удалить 10-20 символов из поля для адреса не сложно, а вот после полученого километрового кода необходима. |
|
15.01.2019, 06:32
|
|
Аспирант
|
|
Регистрация: 27.10.2012
Сообщений: 80
|
|
|
Malleys,
Всё равно с тела не работает, просто очищается поле для ввода адреса и всё
|
|
15.01.2019, 08:41
|
|
Профессор
|
|
Регистрация: 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.
|
|
15.01.2019, 09:12
|
|
Аспирант
|
|
Регистрация: 27.10.2012
Сообщений: 80
|
|
|
Операционная система:
Android 4.4.2 Android 4.4.2
Ваш браузер:
Chrome 40.0.2214.109
|
|
|
|
