Question

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

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

这一切都很好。我想要实现的是：

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

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

Answer 1

你的拖拉怎么实施？ HTML5拖放或基于DOM？从描述中我怀疑你正在使用基于DOM的拖放

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

试试这个：

导航至：http://decafbad.com/2009/07/drag-and-drop/api-demos.html
打开一个新窗口并导航至：http://funwithbonus.com/wp-content/uploads/stack-drawers.jpg
将图像拖到第4个示例“使用拖动反馈imagesBack to 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);
}

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

2 个答案: