Как правильно создать новый таб с html?
Добрый день,
есть клиент на JS, в котором формируются данные. На основе этих данных я хочу сгенерить html и по евенту разместить этот html в новый таб. То есть грубо говоря, у меня есть где-то что-то примерно как <a href="XXX" target="_blank">Ссылка откроется в новом окне</a> и при нажатии на нее, вызывается моя функция в JS, которая генирирует текст для XXX и этот текст в виде html+js+css открывается в новом табе. Понимаю, что я могу послать на мой сервер ссылку-запрос для генерации такой страницы, далее на клиенте создать ссылку и показать ее пользователю, а далее пользователь может тыкнуться на эту ссылку или нет. Но это приведет к тому, что мне надо будет хранить номер ссылки в зависимости от пользователя, и пользователь может забыть или не захотеть тыкнуться. Запутался и не понимаю разумно это или нет, или есть какие-то более правильные методы, пожалуйста, посоветуйте, как это принято делать!!! Для чего это мне, имею самопально написанную базу молекулярных структур https://www.elegant-nmr.com/mdb/ (форучанам - огромное спасибо за помощь!!!) . От пользователей появилась хотелка, чтобы пользователь мог сохранить одну молекулу себе в виде отдельного html и, возможно вставил бы себе на сайт со ссылкой на меня. Спасибо! |
Что должен получить пользователь, страницу (текст HTML), или ссылку, по которой он должен будет получать страницу? Что он должен вставлять на свой сайт прямо страницу или ссылку, по которой он должен будет получать страницу от вашего сервера?
Просто сгенерить страницу (как текст) и перейти на нее несложно.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" lang="ru">
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
</div>
<a id=link target="_blank" >Открыть новую вкладку</a>
<script>
// Это текст новой страницы
let page=`
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" lang="ru">
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<style>
h3 {
color:red;
}
</style>
<s`+`cript>
window.onload = function () {
alert ('Вот. Сгенегили, открыли, вывели!')
}
</`+`script>
</head>
<body>
<h3>New page</h3>
Всякое бла-бла-бла<br>
Очень много бла-бла-бла<br>
Опять бла-бла-бла<br>
</body>
</html>
`; // конец текста сраницы
// По клику на <a> формируем ему href
document.getElementById('link').addEventListener('click', function () {
let blob = new Blob([page], {type : 'text/html'});
this.href = window.URL.createObjectURL(blob)
})
</script>
</body>
</html>
(С тегами <script></script> приходится поступать так. Иначе они распознаются парсером html как часть текущей страницы, а не как часть строки) Но если нужна ссылка, то надо сгенерить URL в виде GET запроса к серверу со всеми параметрами. И давать ее |
Огромное-преогромное спасибо!!!
Во, как раз то, что хотел! У меня есть два варианта, если пользователь хочет вставить что-то стандартное, то проще сгенерировать на сервере страницу и дать на нее ссылку (это я понимаю как сделать), но есть случаи, когда пользователь хочет сделать специальную страничку на основании им отредактированных данных, и Ваш вариант, как раз и решает мою вторую задачу. СПАСИБО ОГРОМНОЕ!!! |
Позвольте, пожалуйста, поднять эту же тему.
Обсуждаемый пример классно работает, но от юзеров пришел отзыв, что они ассоциируют линк со внешним ресурсом, а у меня новый ТАБ генерится внутри JS и без необходимости что-то качать по интернету. То есть теперь хочется, чтобы ТАБ открывался не по нажатию ссылки, а по нажатию кнопки. А попробовал в лоб заменить, и у меня не получилось, попробовал поместить линк внутрь кнопки - тоже как-то не красиво...
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" lang="ru">
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
</div>
<button><a id=link target="_blank" >Открыть новую вкладку</a></button>
<script>
// Это текст новой страницы
let page=`
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" lang="ru">
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<style>
h3 {
color:red;
}
</style>
<s`+`cript>
window.onload = function () {
alert ('Вот. Сгенегили, открыли, вывели!')
}
</`+`script>
</head>
<body>
<h3>New page</h3>
Всякое бла-бла-бла<br>
Очень много бла-бла-бла<br>
Опять бла-бла-бла<br>
</body>
</html>
`; // конец текста сраницы
// По клику на <a> формируем ему href
document.getElementById('link').addEventListener('click', function () {
let blob = new Blob([page], {type : 'text/html'});
this.href = window.URL.createObjectURL(blob)
})
</script>
</body>
</html>
Пожалуйста, подскажите, можно ли у кнопки как-то свойство href создать, чтобы такой ТАБ открыть? Спасибо! |
Was-Ja, тебя кто такое "научил" ваять? :blink:
|
Цитата:
А разве моя хотелка не логична - мне несколько бета тестеров именно это заметила. |
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" lang="ru">
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
</div>
<button id='but'>Открыть новую вкладку</button>
<script>
// Это текст новой страницы
let page=`
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" lang="ru">
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<style>
h3 {
color:red;
}
</style>
<s`+`cript>
window.onload = function () {
alert ('Вот. Сгенегили, открыли, вывели!')
}
</`+`script>
</head>
<body>
<h3>New page</h3>
Всякое бла-бла-бла<br>
Очень много бла-бла-бла<br>
Опять бла-бла-бла<br>
</body>
</html>
`; // конец текста сраницы
// По клику на <a> формируем ему href
document.getElementById('but').addEventListener('click', function () {
let blob = new Blob([page], {type : 'text/html'});
window.open(window.URL.createObjectURL(blob), '_blank')
})
</script>
</body>
</html>
|
Цитата:
А вот хранить некую страницу в переменной - это уже какой-то трэш. |
Супер, СПАСИБО огромное, voraa!!!
|
Цитата:
Я сам 30 лет назад о таком мечтал, но тогда у меня не было под рукой базы с миллиардом молекул, да и JS я тогда не знал, а на тикле такое нарисовать было очень не удобно. |
| Часовой пояс GMT +3, время: 18:19. |