Javascript 在Chrome和Edge之间拖放HTML_Javascript_Google Chrome_Drag And Drop_Microsoft Edge

Javascript 在Chrome和Edge之间拖放HTML

javascript google-chrome

Javascript 在Chrome和Edge之间拖放HTML,javascript,google-chrome,drag-and-drop,microsoft-edge,Javascript,Google Chrome,Drag And Drop,Microsoft Edge,我正在编写一个显示web链接的小UI组件。这个想法是在这个组件上拖放链接，它获取url、页面标题并添加到列表中。源代码可以是浏览器地址栏、书签或嵌入HTML页面的简单链接。为了查看接收到的数据，我编写了两种方法： dropHandler(event){ this.traceDataTransfer(event.dataTransfer); event.preventDefault(); } traceDataTransfer(data) { console.log(data.typ

我正在编写一个显示web链接的小UI组件。这个想法是在这个组件上拖放链接，它获取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 browser添加到组合中，来自Chrome的文本/html数据的编码被破坏

我在Chrome、Firefox和Edge之间的html页面（任何源页面）上拖放一个链接。每个浏览器处理剪贴板的方式似乎不同，所以我在不同的对之间获得不同的数据集。一个始终存在且相同的项目是url：

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

text/html

MIME类型也始终存在，根据浏览器组合略有不同，但在所有情况下都包含

。在所有情况下，从铬到边缘除外

Chrome到Chrome和Firefox到Edge：

 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>

镀铬至边缘：

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

Edge to Chrome也可以，尽管Edge内嵌了所有适用的样式：

 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; ...

text/html 2053我在Edge Legacy上重现了这个问题。但是，如果需要darg元素的html代码，可以在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

完整示例：

功能allowDrop（ev）{
ev.preventDefault（）；
}
功能阻力（ev）{
ev.dataTransfer.setData（“文本”，ev.target.id）；
}
函数dropHandler（事件）{
event.preventDefault（）；
此.traceDataTransfer（事件.dataTransfer）；
var data=event.dataTransfer.getData（“文本”）；
event.target.appendChild（document.getElementById（数据））；
log（event.target.appendChild（document.getElementById（data））；
}
功能跟踪数据传输（数据）{
console.log（数据类型）；
data.types.forEach（（t）=>{
const value=data.getData（t）；
console.log（t，value.length，value）；
});
}
#第1部分{
宽度：350px；
高度：70像素；
填充：10px；
边框：1px实心#AAAAA；
}



我在Edge Legacy上重现了这个问题。但是，如果需要darg元素的html代码，可以在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

完整示例：

功能allowDrop（ev）{
ev.preventDefault（）；
}
功能阻力（ev）{
ev.dataTransfer.setData（“文本”，ev.target.id）；
}
函数dropHandler（事件）{
event.preventDefault（）；
此.traceDataTransfer（事件.dataTransfer）；
var data=event.dataTransfer.getData（“文本”）；
event.target.appendChild（document.getElementById（数据））；
log（event.target.appendChild（document.getElementById（data））；
}
功能跟踪数据传输（数据）{
console.log（数据类型）；
data.types.forEach（（t）=>{
const value=data.getData（t）；
console.log（t，value.length，value）；
});
}
#第1部分{
宽度：350px；
高度：70像素；
填充：10px；
边框：1px实心#AAAAA；
}



谢谢你的建议。但它只能在同一页面上进行拖放操作。我要做的是-我从另一个浏览器窗口（任何外部站点）拖动一个链接，其中源数据不在我的控制范围内。我看到了。这似乎不是一个好办法来解决它的边缘。这可能是浏览器引擎本身的问题。我认为你可以做出妥协，在从Chrome拖动到Edge时只使用链接url。或者尝试使用最新的边缘，这是铬为基础的，没有这样的问题。是的，我只在这种情况下使用链接。事实上，我在其他情况下只能得到链接。因此，要么我从一个链接中创建一些近似的标题，要么最终我将不得不跳转到后端以获得页面标题。谢谢你的想法。但它只能在同一页面上进行拖放操作。我要做的是-我从另一个浏览器窗口（任何外部站点）拖动一个链接，其中源数据不在我的控制范围内。我看到了。这似乎不是一个好办法来解决它的边缘。这可能是浏览器引擎本身的问题。我认为你可以做出妥协，在从Chrome拖动到Edge时只使用链接url。或者尝试使用最新的边缘，这是铬为基础的，没有这样的问题。是的，我只在这种情况下使用链接。事实上，我在其他情况下只能得到链接。因此，要么我从一个链接中创建一些近似的标题，要么最终我必须跳转到后端才能获得页面标题。