перетащите HTML между Chrome и Edge - PullRequest
Новая
       22

перетащите HTML между Chrome и Edge

1 голос
/ 05 марта 2020

Я пишу небольшой компонент пользовательского интерфейса, который отображает веб-ссылки. Идея состоит в том, чтобы перетащить ссылку на этот компонент, он получает URL, заголовок страницы и добавляет в список. Источником может быть адресная строка браузера, закладка или простая ссылка, встроенная в страницу HTML. Чтобы увидеть, какие данные я получаю, я написал несколько методов: 

dropHandler(event){
  this.traceDataTransfer(event.dataTransfer);
  event.preventDefault();
}
traceDataTransfer(data) {
  console.log(data.types);
  data.types.forEach((t) => {
    const value = data.getData(t);
    console.log(t, value.length, value);
  });
}

dropHandler подключается к событию ondrop.

При работе только с Chrome и Firefox все работает нормально. Каждый производит / получает немного разные данные, но в целом я получаю данные, которые мне нужны. Теперь я добавляю в смесь браузер Edge и кодировка текста / html данных из Chrome ломается.

Я перетаскиваю ссылку со страницы html (любая исходная страница) между Chrome, Firefox и Edge. Кажется, что каждый браузер обрабатывает буфер обмена по-разному, поэтому я получаю разные наборы данных между разными парами. URL-адрес, который всегда присутствует и является одним и тем же: url: 

text/uri-list 61 https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer

text/html Тип MIME также всегда присутствует, немного отличается в зависимости от комбинации браузера, но во всех случаях содержит <a href=... >Link title</a>. Во всех случаях, кроме от Chrome до края.

Chrome до Chrome и Firefox до края: 

 text/html 101 <a href="https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer"><code>DataTransfer</code></a>

Chrome до Firefox: 

 text/html 169 <html>
      <body>
      <!--StartFragment--><a href="https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer"><code>DataTransfer</code></a><!--EndFragment-->
      </body>
 </html>

Chrome до Edge: 

 text/html 56 愼栠敲㵦栢瑴獰⼺搯癥汥...

Edge до Chrome тоже в порядке, хотя Edge упаковывает все применимые стили inline: 

 text/html 2053 <a href="https://developer.mozilla.org/en-US/docs/Web/API/DragEvent/dataTransfer" style="background-color: rgb(40, 92, 118); border-bottom-color: currentColor; ...

It похоже, что между Chrome и Edge есть какая-то проблема с кодировкой. Скажем, Edge обрабатывает данные как UTF-8 или UTF-16, а Chrome кодирует как ...

Есть идеи, как это исправить или отладить? Я не вижу, как обеспечить выполнение конкретной кодировки.

Chrome равно 80.0.3987.87 и Edge 44.17763.831.0 на случай, если это какая-то ошибка сейчас.

1 Ответ

0 голосов
/ 06 марта 2020

Я воспроизвел проблему на Edge Legacy. Но если вам нужен код html элемента darg, вы можете поместить следующий код в dropHandler в качестве обходного пути: 

var data = event.dataTransfer.getData("text");
event.target.appendChild(document.getElementById(data));
console.log(event.target.appendChild(document.getElementById(data))); //log the text/html part

Полный пример: 

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function dropHandler(event) {
  event.preventDefault();
  this.traceDataTransfer(event.dataTransfer);
  var data = event.dataTransfer.getData("text");
  event.target.appendChild(document.getElementById(data));
  console.log(event.target.appendChild(document.getElementById(data)));
}

function traceDataTransfer(data) {
  console.log(data.types);
  data.types.forEach((t) => {
    const value = data.getData(t);
    console.log(t, value.length, value);
  });
}
#div1 {
  width: 350px;
  height: 70px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}
<div id="div1" ondrop="dropHandler(event)" ondragover="allowDrop(event)"></div>
<br>
<a href="https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer" id="drag1" draggable="true" ondragstart="drag(event)">DataTransfer</a>
...