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

Question

I have an iframe loaded into a parent page. The page and the iframe are hosted on different domains. My iframe skeleton looks something like this : http://cl.ly/image/44090J0H2S3Y

I am trying to implement drag and drop of files into the iframe from outside. Due to security reasons, browsers wont forward drag/drop events to the iframe loaded from a different domain. Currently, I am working around that by placing a transparent div over the entire iframe and catching the javascript "drop" event onto the transparent div and then use iframe.postMessage to send a message to the iframe. On the iframe side, I have some javascript listening for the message and takes appropriate action of uploading it to my server.

This all is working fine. What I want to implement is the following :

1. User starts dragging an image from the host page
2. As soon as s/he arrives in the "blue" area, the corresponding blue item should highlight
3. When s/he lets go, the file should be uploaded

I can place a separate transparent div on each of the blue items but the problem is there could be any number of blue items with the scrollbar etc. I am not sure how I can achieve this. Thanks for your help!

Answer 1

How are your drag'n drop implemented? HTML5 drag'n drop or DOM based? From the description I suspect you are using DOM based drag'n drop

Because of browser restrictions it is not possible to read/write to the DOM of the iframe when it is hosted on another domain. It will probably not give you the desired effect, but HTML5 drag'n drop is much better for dragging between iframes and windows. But again you can not add style to the drop target from the source document code.

Try this:

1. Navigate to: http://decafbad.com/2009/07/drag-and-drop/api-demos.html
2. Open a new window and navigate to: http://funwithbonus.com/wp-content/uploads/stack-drawers.jpg
3. Drag the image to the 4th example "Using drag feedback imagesBack to TOC"

If you have access to the domain of the target document you could implement a drop zone to the 'blue items' that handles the highlighting

Answer 2

I would go about creating the transparent divs via a method such as this:

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