Javascript [data-label] 在 Firefox 而不是 Chrome 中工作

Question

我是一名设计师，在 Axure 中创建原型(prototype)，并使用 Javascript 处理其生成的 html 以演示交互设计。生成的 html 主要由 [data-label] 元素构成，我在 Firefox 中的测试中能够成功访问这些元素。如:

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

虽然原型(prototype)在 Firefox 中运行良好，但 Javascript 功能在 Chrome 中不起作用，我不明白为什么。如果您访问This Prototype在Firefox中，点击图片上传区，图片会反射(reflect)在下方图片区(如下图):

但是在chrome中点击图片区域并没有注册文件上传协议(protocol)。这里有什么区别？如何获得扩展到 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:更改所有内容以反射(reflect)@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);

上面的代码对我来说工作正常，如果你把一些文件放在你的拖放区，它会警告“FILES DROPPED!”。所以你现在唯一要做的就是对丢失的文件做些什么。您可以在 drop 处理程序内的 e.dataTransfer.files 中找到它们。

---

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