Как мне переместить iframe / video в другой div, если iframe существует в содержимом?

#php #html

#php #HTML

Вопрос:

Сайт WordPress.

Я хочу jquery или php, или любое простое решение, которое возьмет div из div id= content (если оно существует) и поместит его в id = iframer div, удалив его в id = content при загрузке.

 <div id="iframer">
**/ I am waitting to get "<div class="video">All content </div>" inside me. /**
</div>

<div id="content">
<div class="video">
<iframe width="697" height="392" src="https://www.youtube.com/embed/xxxxxxx?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
</div>
</div>

Результат после некоторого скрипта…

 <div id="iframer">
<div class="video">
<iframe width="697" height="392" src="https://www.youtube.com/embed/xxxxxxx?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
</div>
</div>

<div id="content">
**/ Iframer stolen my content. /**
</div>

Ответ №1:

Не уверен, почему вы не можете редактировать HTML напрямую или код, который генерирует этот HTML, но вот мое решение с помощью javascript / jQuery.

 <script>
//A page can't be manipulated safely until the document is "ready."
$( document ).ready(function() {
  //Get the html content inside div with id='content'
  var myHtml = $( '#content' ).html();

  //Copy the HTML in the div with id='iframer'
  $( '#iframer' ).html( myHtml );

  //Delete the HTML content inside div with id='content'
  $( '#content' ).html( '' );
});
</script>

1. Хотя это работает отлично, загрузка страницы показывает, что видео переходит из div в div. Есть какое-либо решение для камуфлирования этого?

2. Да, вы можете использовать CSS, чтобы по умолчанию скрыть содержимое div с id =’content’. Но вы все равно увидите всплывающее видео в новом div (не из одного в другой). Лучшим решением было бы иметь контроль непосредственно над базовым исходным кодом, но да, изменить способ работы WordPress может быть сложно.

Ответ №2:

Я бы использовал .detach и .appendTo . Таким образом, сохраняются прослушиватели ваших событий, плагины и т.д., Которые привязаны к элементу DOM.

.detach() Метод такой же, как .remove() , за исключением того, что .detach() сохраняет все данные jQuery, связанные с удаленными элементами. Этот метод полезен, когда удаленные элементы должны быть повторно вставлены в DOM позже

 $( document ).ready(function() {
     $('button').click(function(){

          var content = $( '#content > .video' ).detach();

          content.appendTo('#iframer');
      });
});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="iframer" style="padding:5px; background:#CCC;"></div>

<button>Click</button>

<div id="content">
  <div class="video">
     Video Content here
  </div>
</div>

Я добавил немного цвета фона и что-нет, чтобы сделать его немного более наглядным.

Приветствия!