檢測來自不同域的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);
}