检测来自不同域的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托管在另一个域上，则无法对其进行读/写操作。 它可能不会给您带来理想的效果，但是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. 将图像拖动到第四个示例“使用拖动反馈图像返回到目录”

如果您有权访问目标文档的域，则可以在“突出显示的蓝色项目”上实现放置区域

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);
}