0

我需要捕获通过将书签拖放到窗口上触发的事件，最好是在所有浏览器中。我真正需要的是书签的目标网址。onbeforeunload确实被触发了，但该事件没有关于目标 URL 的信息，我也无法阻止页面加载它。 mouseup也不起作用。

API 似乎可行，FileReader但我不确定它是否合适。理想情况下，这至少也适用于 IE9（不支持FileReader）。

4

1 回答 1

0

我有一个解决这个问题的第一部分的方法，但我自己希望得到第二部分的帮助，所以如果这对你的问题有帮助，那将不胜感激。

注意：这大部分都是基于我的个人经验，所以在我们深入之前，我会记录一下兼容性。

  • 该drop事件在 Microsoft Edge 12+ 上受支持，并且有一个字段 ，dataTransfer其中包含有关被拖放的元素的信息。这个字段被添加到 IE 中null，因为这个原因我不会谈论我为它找到的解决方案。从您发帖的时间来看，您似乎使用的是最新的 Microsoft 浏览器，这意味着我在下面讨论的功能将得到支持。

您要查看的第一个事件是drop. 从逻辑上讲，这个事件是当您将元素放到页面上时触发的事件，无论是文件、另一个元素还是在我们的例子中为书签。

第二个事件，相当令人困惑的是dragover。出于某种未知原因，自行抑制drop事件的默认行为似乎并不能完全否定转到新网页的效果，而是将我（使用 Chrome 94）重定向到新选项卡中的 about:blank#blocked，这可能干扰用户体验。

事件的files属性通常包含dataTransfer有关drop正在传输的数据的信息，并且正如我所试验的那样，我从中得到了这些数据：

{
  items: DataTransferItemList {0: DataTransferItem {'kind': 'string', 'type': 'text/plain'}, 1: DataTransferItem {'kind': 'string', 'type': 'text/uri-list'}, length: 2},
  types: ['text/plain', 'text/uri-list'],
  files: FileList {length: 0}
}

我对files不包含任何数据的事实感到相当沮丧，而且它目前让我陷入了无法继续前进的地步。我会看看我是否记得在/如果它得到修复时发回这里，但在那之前，还有一件事我想指出。

在 Windows 计算机上，Internet 快捷方式实际上是带有.url扩展名的小文件。因此，如果用户简单地从他们的主页拖入一个快捷方式，就有可能获得一个站点的名称和它的地址。我获取数据的代码如下。

element.addEventListener('drag', function(event)) {
  event.preventDefault();
  // in case you haven't put this in already; having multiple has
  // the same effect as one
  let shortcutFile = event.dataTransfer.files[0];
  // This assumes the user is only dragging a single file, but it can be
  // expanded to others by simply detecting the extension of the file.
  let fileName = shortcutFile.name;
  let fileLines = fileContent.split('\n');
  // the last line of the file has a pattern that looks like this:
  //   URL=<url to site>
  // this is what i'm going to be using to get the address.
  // 
  // the better solution to the first index below would be to use
  // Array.prototype.at(-1), however doing so would require a polyfill
  // on all versions of Opera, IE, and Safari, not to mention that even somewhat
  // recent browsers don't have this method implemented.

  let siteUrl = fileLines[fileLines.length - 1].match(/(?<=URL=)/)[0];
  
  // going to use one of my favorite JS features here: object destructuring!
  // it's not supported in some older browsers, or in IE at all, but it's a VERY
  // cool feature nonetheless, so I use it when i really shouldn't a lot of the time
  // 
  // i know stuff is supposed to be cross-compatible but what's the point
  // in browsers getting new APIs/interfaces like this if you don't use
  // them?
  return {fileName, siteUrl};
  
  // oh yeah explanation of how it works
  // it's basically the same thing as saying {fileName: fileName, siteUrl: siteUrl}
  // looks very nice right?
}

希望这些信息和解决方法有所帮助，并且我们俩都遇到的确切问题得到解决！

于 2021-10-05T21:55:02.930 回答