检测来自不同域的 iframe 上的悬停

Question

我有一个 iframe 加载到父页面中。页面和 iframe 托管在不同的域上。我的 iframe 骨架看起来像这样：http://cl.ly/image/44090J0H2S3Y

我正在尝试将文件从外部拖放到 iframe 中。由于安全原因，浏览器不会将拖放事件转发到从不同域加载的 iframe。目前，我正在通过在整个 iframe 上放置一个透明 div 并将 javascript“drop”事件捕获到透明 div 上，然后使用 iframe.postMessage 向 iframe 发送消息来解决这个问题。在 iframe 方面，我有一些 javascript 监听消息并采取适当的操作将其上传到我的服务器。

这一切都很好。我要实现的是以下内容：

1. 用户开始从主机页面拖动图像
2. 一旦她/他到达“蓝色”区域，相应的蓝色项目应突出显示
3. 当她/他放手时，应该上传文件

我可以在每个蓝色项目上放置一个单独的透明 div，但问题是滚动条等可能有任意数量的蓝色项目。我不确定如何实现这一点。感谢您的帮助！

Answer 1

您的拖放是如何实现的？ HTML5 拖放或基于 DOM？ 从描述中我怀疑你正在使用基于 DOM 的拖放

由于浏览器限制，当 iframe 托管在另一个域上时，无法读取/写入 iframe 的 DOM。 它可能不会给你想要的效果，但 HTML5 拖放对于 iframe 和窗口之间的拖动要好得多。但同样你不能从源文档代码中为放置目标添加样式。

试试这个：

1. 导航到：http://decafbad.com/2009/07/drag-and-drop/api-demos.html
2. 打开一个新窗口并导航到：http://funwithbonus.com/wp-content/uploads/stack-drawers.jpg
3. 将图像拖动到第 4 个示例“使用拖动反馈图像返回 TOC”

如果您有权访问目标文档的域，则可以对处理突出显示的“蓝色项目”实施拖放区

Answer 2

我会通过以下方法创建透明 div：

var blueItemContainer = document.getElementById('blueItemContainer');
var blueItems = blueItemContainer.childNodes;

blueItemContainer.style.position = "relative";

for(var i = 0; i < blueItems.length; i++)
{
    var transparentDiv = document.createElement('div');
    transparentDiv.style.height = blueItems[i].style.height;
    transparentDiv.style.width = blueItems[i].style.width;
    transparentDiv.style.position = "absolute";
    transparentDiv.style.left = blueItems[i].offsetLeft;
    transparentDiv.style.top = blueItems[i].offsetTop;
    blueItemContainer.appendChild(transparentDiv);
}