Javascript [数据标签]在Firefox中运行而不是Chrome

Question

我是设计师在Axure中创建原型，并使用Javascript操纵其生成的html以演示交互设计。生成的html主要由[data-label]元素构成，我在Firefox的测试中能够成功访问。如：

$("div[data-label='ImageDropArea']").append(... etc. ...);

虽然原型在Firefox中运行良好，但Javascript功能在Chrome中无效，我无法弄清楚原因。如果您在Firefox中访问This Prototype，然后点击图片上传区域，则图片会反映在下方的图片区域中（如下图所示）：

但是，单击chrome中的图像区域不会注册文件上载协议。这可能有什么不同？如何将功能扩展到chrome和Firefox？我已经花了很多时间在Firefox中开发这些资源，并希望我能修复实现，以便它可以与Chrome / Safari一起使用。

有关我想要完成的工作和方法的背景，Look Here。感谢您对这个棘手问题的任何想法！

---

编辑：根据@Marco Bonelli的推荐添加

var iframe = document.getElementsByTagName('iframe')[0].contentWindow;
var frameURL = '/prototypes/freshier-file-upload-with-drag-and-drop/',
     pageURL = location.hostname; // www.nickbewley.com or nickbewley.com

document.getElementsByTagName('iframe')[0].src = 'http://' + pageURL + frameURL;

---

编辑2：改变一切以反映@Marco Bonelli的建议（感谢您的帮助！），但仍然没有运气..

• 将js文件放在iframe
之后
• 添加了var iframe = document.getElementsByTagName('iframe')[0].contentWindow;和iframe.$();
• if (self === parent) { ... }
中包含的代码

非常感谢任何关于如何使这项工作的指示!!

Answer 1

我在您的网站上工作，我注意到它确实工作正常。我尝试将一些事件监听器添加到您的ImageDropArea并且它有效。看，尝试转到 YOUR SITE ，然后将此代码复制并粘贴到JavaScript控制台中：

function handleDrop(e) {
    e.stopPropagation();
    e.preventDefault();
    alert('FILES DROPPED!');
    // do something with the files
    // e.dataTransfer.files
}

function handleDragOver(e) {
    e.stopPropagation();
    e.preventDefault();
    e.dataTransfer.dropEffect = 'copy'; // say that is a copy
}

dropZone = $('[data-label="ImageDropArea"]')[0];
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleDrop, false);

上面的代码可以正常使用，如果你在丢弃区域删除了一些文件，它会提醒＆＃34; FILES DROPPED！＆＃34;。因此，您现在唯一要做的就是对丢弃的文件执行某些操作。您可以在e.dataTransfer.files处理程序内的drop中找到它们。

---

顺便说一句你必须修复此错误，这非常烦人并导致所有代码崩溃。 我建议您从零开始重写所有代码。