Создание кнопки для перемещения элемента с одной страницы html на другую страницу html

Question

Я хотел взять изображение из одного HTML файла, и когда пользователь нажимает кнопку, это изображение перемещается в стандартную ячейку другого файла HTML.

Answer 1

Чтобы переместить элемент между страницами, если обе страницы находятся в одном домене, вы можете получить HTML элемента, поместить его в localStorage, а затем удалить элемент. На другой странице опросите localStorage на предмет изменений, проанализируйте элемент и используйте его в DOM.

Я написал для этого набор функций. На странице отправки используйте этот код. Вызовите функцию moveElement с элементом, который вы хотите переместить на другую страницу.

const page="Your Page Name";

function moveElement(element){
  const prefix="_elementmover_"+page+"_";
  localStorage.setItem(prefix+"htmlToMove",element.outerHTML);
  localStorage.setItem(prefix+"changedHtmlToMove",localStorage.getItem(prefix+"changedHtmlToMove")*1+1);
  image.remove()
}

На получающей странице используйте этот код. Функция receivedElement будет вызываться с элементом.

const page="Your Page Name";

function receivedElement(element){
  // Do whatever you want with the element here.
}

(()=>{
  const prefix="_elementmover_"+page+"_";
  let getChangeNum=()=>localStorage.getItem(prefix+"changedHtmlToMove")*1;
  let oldChangeNum=getChangeNum();
  let checkForChanges=()=>{
  let newChangeNum=getChangeNum();
  if(oldChangeNum!=newChangeNum){
    let element=new DOMParser().parseFromString(localStorage.getItem(prefix+"htmlToMove"),"text/html").querySelector("html>body>*");
    receivedElement(element)
  }
  oldChangeNum=newChangeNum
  setTimeout(checkForChanges,100);
}
checkForChanges();
})();

Обратите внимание, что переменная page должна быть уникальной на каждом наборе страниц, на которых она находится, но обе страницы должны иметь одинаковое значение для чтобы он работал правильно.