Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   как взять массив из блоков с одной страницы и вставить на другу. (https://javascript.ru/forum/dom-window/75691-kak-vzyat-massiv-iz-blokov-s-odnojj-stranicy-i-vstavit-na-drugu.html)

Migor 30.10.2018 10:11
как взять массив из блоков с одной страницы и вставить на другу.
 
Всем привет. Возможно тема не по разделу прошу не серчать. Подскажите по возможности по вопросу, делаю блог новостей proverka.top в разделе НОВОСТИ будут идти все новости списком, как из этой страницы вставить последнюю новость на ГЛАВНУЮ. Сейчас она "Новость" прописана в html, но нужно чтоб при замене в разделе новости автоматически на главной вставлялась последняя новость. Заранее благодарен

Dilettante_Pro 30.10.2018 10:29
Цитата:
Сообщение от Migor
proverka.top в разделе НОВОСТИ будут идти все новости списком,
А откуда новости, в том числе последняя, попадают на эту страницу?
Цитата:
Сообщение от Migor
как из этой страницы вставить последнюю новость на ГЛАВНУЮ
Пока эта страница не вызвана, надо полагать, и новостей в ней никаких нет

Migor 30.10.2018 10:32
в раздел новости будут добавлять раз в неделю в ручном режиме. из этого списка будет массив допусти news[i], надо этот news[0] попадал на главную страницу

Dilettante_Pro 30.10.2018 12:14
Цитата:
Сообщение от Migor
в раздел новости будут добавлять раз в неделю в ручном режиме. из этого списка будет массив допусти news[i], надо этот news[0] попадал на главную страницу
Это что же? Страница формата html? И ее надо будет сканировать и выискивать на ней новость?

Migor 30.10.2018 12:18
Цитата:
Сообщение от Dilettante_Pro (Сообщение 497393)
Это что же? Страница формата html? И ее надо будет сканировать и выискивать на ней новость?
<link rel="import" id="link" onload="main_news()" href="news.html">
function main_news() {
let last_news = link.import.querySelector('#last_news');
main_news_content.appendChild(last_news);
};

делаю по учебнику не работает, вызвать функцию не работает.
Не понимаю зачем Вы у меня спрашивает как это сделать, если я сам задаю этот вопрос. Логично же что у меня нет ответа ибо не задавал бы его тут...

Dilettante_Pro 30.10.2018 12:45
Цитата:
Сообщение от Migor
зачем Вы у меня спрашивает как это сделать
Я не спрашиваю, как сделать, я выясняю, где и как размещена требуемая информация

Migor 30.10.2018 12:46
Цитата:
Сообщение от Dilettante_Pro (Сообщение 497393)
Это что же? Страница формата html? И ее надо будет сканировать и выискивать на ней новость?
Цитата:
Сообщение от Dilettante_Pro (Сообщение 497407)
Я не спрашиваю, как сделать, я выясняю, где и как размещена требуемая информация
на сайте proverka.top всё отображено. в разделе новость все новость которые будут добавляться, нужно последнюю новость перенести на гланую

Migor 30.10.2018 12:47
чтоб в будущем при добавлении новостей последняя автоматически появлялась на главной

Dilettante_Pro 30.10.2018 12:58
Migor,
Способ вполне нормальный - должен работать.
А что пишет в консоли?

Кстати, у вас id='last_news' стоит на теле новости - заголовок и дата публикации не отобразятся на главной.

Migor 30.10.2018 13:27
Цитата:
Сообщение от Dilettante_Pro (Сообщение 497410)
Migor,
Способ вполне нормальный - должен работать.
А что пишет в консоли?

Кстати, у вас id='last_news' стоит на теле новости - заголовок и дата публикации не отобразятся на главной.
пока беру только тело без заголовка и даты..

<link rel="import" id="link" onload="main_news()" href="news.html">
let main_news_content = document.querySelector('.main_news_content');
function main_news() {
let last_news = link.import.querySelector('#last_news');
console.log(last_news);
main_news_content.appendChild(last_news);
};
main_news();

выдаёт: link.import is undefined

Migor 30.10.2018 13:28
link is not defined

SuperZen 30.10.2018 13:44
index.html
<html>

<head>
  <link id="news" rel="import" href="/news.html" />
</head>

<body>
  <div id="news-placeholder"></div>
  <script>
    var content = document.getElementById('news').import;
    var items = content.getElementsByClassName('news-item')
    items.length && document.getElementById('news-placeholder').appendChild(items[0])
  </script>
</body>

</html>


news.html
<div class="news">
  <div class="news-item">news 1</div>
  <div class="news-item">news 2</div>
  <div class="news-item">news 3</div>
</div>

SuperZen 30.10.2018 13:48
только это не будет индексироваться поисковиками )

Dilettante_Pro 30.10.2018 13:52
Цитата:
Сообщение от Migor
<link rel="import" id="link" onload="main_news()" href="news.html">
let main_news_content = document.querySelector('.main_news_content');
function main_news() {
let last_news = link.import.querySelector('#last_news');
console.log(last_news);
main_news_content.appendChild(last_news);
};
main_news();

выдаёт: link.import is undefined
Уберите отдельный вызов main_news(); (или сделайте его - для тестирования - по какой-нибудь кнопке)
и поместите link в раздел head до скрипта.

И лучше новости выделить из полного news.html - только, например, <div class="contente"> с содержимым в отдельный файл и подгружать его и на главную страницу, и на страницу новостей - чтобы стили и скрипты не грузились дважды во избежание конфликтов

Migor 30.10.2018 15:34
Всем спасибо за помощь!

Migor 30.10.2018 15:36
а чтоб поисковиками индексировалось что нужно сделать? или это уже не на js делается?

Migor 30.10.2018 15:42
Цитата:
Сообщение от SuperZen (Сообщение 497416)
index.html
<html>

<head>
  <link id="news" rel="import" href="/news.html" />
</head>

<body>
  <div id="news-placeholder"></div>
  <script>
    var content = document.getElementById('news').import;
    var items = content.getElementsByClassName('news-item')
    items.length && document.getElementById('news-placeholder').appendChild(items[0])
  </script>
</body>

</html>


news.html
<div class="news">
  <div class="news-item">news 1</div>
  <div class="news-item">news 2</div>
  <div class="news-item">news 3</div>
</div>
items.length в данном случае что делает?

SuperZen 30.10.2018 15:44
для поисковика это должно рендрериться на стороне сервера...
item.length && это проверка на то, что хоть какие-то элементы найдены, и если найдены то делаем appendChild


Часовой пояс GMT +3, время: 02:07.