Chrome 跨框架拖放：为啥它可以跨浏览器工作？
Posted
技术标签:
【中文标题】Chrome 跨框架拖放：为啥它可以跨浏览器工作？【英文标题】：Chrome Cross frame Drag and Drop: why does it work cross browsers?Chrome 跨框架拖放：为什么它可以跨浏览器工作？ 【发布时间】：2019-11-14 13:11:33 【问题描述】：在我的场景中，html5 页面（父）包含来自不同域的 iframe（子）。理想情况下，我希望能够将元素从父元素拖到子元素中。
这在 FireFox 中有效，但在 Chrome 中由于安全限制而失败 (afaik https://bugs.chromium.org/p/chromium/issues/detail?id=251718)。
但是，如果我在不同的浏览器实例中打开相同的 HTML5 页面，从那里拖动到另一个实例的 iframe 中，那么这是允许的。
安全限制的原因是用户看不到目标 iframe 的 URL，但在这两种情况下都是如此。为什么一个有效而另一个无效？
上样 http://carsten-leue.de/iframe/cross-domain/
尝试将drag me 拖入drop here。这在 Chrome 中是不可能的。在另一个浏览器窗口中打开相同的 URL，然后将 drag me 从新窗口拖到旧窗口的 drop here 中。这行得通。
【问题讨论】：
【参考方案1】：我希望你使用这个 API，因为它允许拖动！ （不像您的来源显示的图像类型！）
<!-- HTML -->
<body>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
</body>
// javascript
document.getElementById('elementId').draggable();
// Or if you have a class name
document.getElementsByClassName('elementClass').draggable();
【讨论】：
【参考方案2】：使用 HTML5 拖放 API 创建跨框架和跨浏览器实现。 http://blog.stackhive.com/post/137799349684/building-a-seamless-drag-and-drop-interface
编辑 - 之前的链接无效（dockphp 更名为 StackHive），因此写了一篇更完整的文章，可以帮助创建史诗般的拖放界面。
来源：Drag-Drop elements between parent frame and child iframe
【讨论】：
以上是关于Chrome 跨框架拖放：为啥它可以跨浏览器工作？的主要内容，如果未能解决你的问题，请参考以下文章
为啥禁用浏览器网络安全（例如 Chrome）有助于执行跨站点请求？
setTimeout(f,0) 等效？为啥它可以解决跨浏览器问题？