Question

Id当图像（例如）从剪贴板粘贴到webkit可编辑内容区域时，可能会出现这样的情况：源代码如下所示：

webkit-fake-url://DCAC99B9-BA40-4BA7-A419-9C60AAB081DA/image.png

能够通过javascript访问图像以与文本一起发送回服务器吗？

Answer 1

显然，你可以使用你喜欢的事件监听器的任何抽象;我提供了一个未提取的版本;这也将排除IE＆lt; 9

if('addEventListener' in editableElement) {
    editableElement.addEventListener('paste', function(e) {
        // First two conditionals should weed out browsers which
        // don't allow access to pasted content
        if(('clipboardData' in e) && ('types' in e.clipboardData) &&
            e.clipboardData.types.indexOf('public.url') > 1) {
            e.target.ownerDocument.execCommand('insertImage', null,
                e.clipboardData.getData('public.url'));
            e.preventDefault();
            e.stopPropagation();
        }
    }, false);
}

在处理WebKit贴纸中的怪异时，最好检查粘贴事件的clipboardData：

console.dir(eventObj.clipboardData);

但根据我的经验，Web Inspector似乎在显示控制台时检查内存中的活动对象，而不是调用当时和范围console.dir中的对象。此时，paste事件将结束，Javascript对剪贴板的访问权限将被撤销，因此types属性将为null，并且隐藏实际的剪贴板数据。但是在您的活动中，您可以这样做以更好地了解可用的类型以及它们的输出结果：

for(var i = 0; i < eventObj.clipboardData.types.length; i++) {
    console.log(eventObj.clipboardData.types[i] + ':',
        eventObj.clipboardData.getData(eventObj.clipboardData.types[i]));
}

我花了更多的时间来承认在WebKit浏览器中调试clipboardData。希望这有帮助！

Javascript webkit-fake-url

1 个答案: