JS перенести не полную информацию с другой страницы, не понимаю как сделать иначе?
Есть страница "lenta_work.html", где есть блоки с именем "wowo". Эти блоки я хочу чтобы JS автоматически переносил на другую страницу.
Блок, который необходимо дублировать:
<div class="xzzzzzz" id="afisha_koncert"> <a href="https://pixelherber.ru/content/af02r/af"><img src="content/af02r/thank.png" alt=""></a> <figcaption> <a href="#">Афиша<br><span id="under_logo_work_bl">Спасибо всем</span></a></figcaption> </div> |
<div class="xzzzzzz" id="afisha_koncert"> <a href="https://pixelherber.ru/content/af02r/af"><img src="content/af02r/thank.png" alt=""></a> <figcaption> <a href="#">Афиша<br><span id="under_logo_work_bl">Спасибо всем</span></a></figcaption> </div>
JS код на странице куда необходимо вывести:
<script> // JavaScript to import elements with class "xzzzzzz" from page1.html window.addEventListener('DOMContentLoaded', function () { // Get the content from page1.html using an XMLHttpRequest var xhr = new XMLHttpRequest(); xhr.open('GET', '/lenta_work.html', true); xhr.onload = function () { if (xhr.status === 200) { // Parse the response as a DOM object var parser = new DOMParser(); var doc = parser.parseFromString(xhr.responseText, 'text/html'); // Extract all elements with class "xzzzzzz" var elementsToImport = doc.querySelectorAll('. xzzzzzz'); // Display the imported elements in page2.html var importedContainer = document.getElementById('imported-logos'); elementsToImport.forEach(function (element) { // Clone each element and append it var clonedElement = element.cloneNode(true); importedContainer.appendChild(clonedElement); }); } }; xhr.send(); }); |
<script> // JavaScript to import elements with class "xzzzzzz" from page1.html window.addEventListener('DOMContentLoaded', function () { // Get the content from page1.html using an XMLHttpRequest var xhr = new XMLHttpRequest(); xhr.open('GET', '/lenta_work.html', true); xhr.onload = function () { if (xhr.status === 200) { // Parse the response as a DOM object var parser = new DOMParser(); var doc = parser.parseFromString(xhr.responseText, 'text/html'); // Extract all elements with class "xzzzzzz" var elementsToImport = doc.querySelectorAll('. xzzzzzz'); // Display the imported elements in page2.html var importedContainer = document.getElementById('imported-logos'); elementsToImport.forEach(function (element) { // Clone each element and append it var clonedElement = element.cloneNode(true); importedContainer.appendChild(clonedElement); }); } }; xhr.send(); });
В итоге я получаю текст, но присутствующая картинка отсутствует. Не понимаю как записать чтобы он мне продублировал полностью этот блок ( не только текст )
Дополнительно:
Добрый день,
Самый простой вариант с использованием jQuery
$( "#result" ).load( "ajax/test.html" );
С уважением,
Евгений
- Прописал на страницу вывода, в итоге все также выводит только текст
<div id="imported-xzzzzzz"> <!-- Imported content will be displayed here --> </div> <!-- Include jQuery --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> // JavaScript (jQuery) to duplicate the .xzzzzz block $(document).ready(function () { // Load content from page1.html $.get('/lenta_work.html', function (data) { // Extract the .xzzzzz block from the loaded content var importedContent = $(data).find('.xzzzzzz'); // Append the imported content to the target element $('#imported-xzzzzzz').append(importedContent); }); }); </script>
<div id="imported-xzzzzzz"> <!-- Imported content will be displayed here --> </div> <!-- Include jQuery --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> // JavaScript (jQuery) to duplicate the .xzzzzz block $(document).ready(function () { // Load content from page1.html $.get('/lenta_work.html', function (data) { // Extract the .xzzzzz block from the loaded content var importedContent = $(data).find('.xzzzzzz'); // Append the imported content to the target element $('#imported-xzzzzzz').append(importedContent); }); }); </script>
- Перепроверил, все ок, работает. Thank
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для переноса информации с одной страницы на другую с помощью JavaScript можно использовать различные методы. Один из способов - использовать XMLHttpRequest или fetch для загрузки данных с другой страницы и дальнейшей обработки этих данных.
Вот пример использования fetch для загрузки данных с другой страницы:
fetch('url_другой_страницы') .then(response => response.text()) .then(data => { // обработка полученных данных console.log(data); }) .catch(error => { console.error('Произошла ошибка', error); });
В этом примере мы используем fetch для получения данных с другой страницы по указанному URL. Затем мы обрабатываем полученные данные в блоке then, где можем выполнить необходимые действия с этими данными.
Если вам нужно загрузить не только текстовые данные, но и другие типы данных (например, JSON), вы можете использовать метод response.json() вместо response.text().
Также учтите, что при использовании fetch возможны проблемы с CORS (Cross-Origin Resource Sharing), поэтому убедитесь, что сервер, с которого вы загружаете данные, разрешает доступ к вашему сайту.
Надеюсь, этот пример поможет вам перенести информацию с одной страницы на другую с помощью JavaScript. Если у вас возникнут дополнительные вопросы или проблемы, не стесняйтесь обращаться за помощью.