在Chrome中拖放图片

Question

I'm trying to write a script for drag and drop of image in a iframe in Chrome. 我正在尝试编写一个脚本，用于在Chrome浏览器的iframe中拖放图片。

<html>
<head>
    <script language="JavaScript">

        function InsertImage(ev)
        {
            alert("drag function called");
            var _image = document.createElement("image");
            var _sel = _win.getSelection();
            if(!_sel.isCollapsed)
            {
                _sel.deleteFromDocument();
            }
            try{
                var _range = _sel.getRangeAt(0);
            }
            catch(e)
            {
                _range = _doc.createRange();
                alert("000000:::: "+e);
                alert("_range is ::"+_range);
            }
            if(!_range)
            {
                _range = _doc.createRange();
            }
            alert("range is ::::"+_range);
            try
            {
                _range.insertNode(_image);
            }
            catch(e)
            {
                alert("1111::  "+e);
            } 
            _range.insertNode(_image);


        }

        function init()
        {
            _iframe =   document.createElement("iframe");
            _iframe.id = "view";
            _iframe.style.height = "250px";
            _iframe.style.width = "600px";
            _iframe.style.top =   "20px";
            _iframe.style.left = "200px";
            _iframe.style.position = "absolute";
            _iframe.style.border = "2px solid lightBlue";
            document.body.appendChild(_iframe);
                _iframe.contentDocument.designMode="on";//No I18N
                _win = _iframe.contentWindow;
                _win.focus();
                _doc = _win.document; //making it global variable

                _doc.body.innerHTML = "<p>aaaa bbbb cccc dddd eeee ffff gggg hhhh iiii jjjj kkkk llll mmmm nnnn oooo pppp qqqq rrrr ssss tttt uuuu vvvv wwww xxxx yyyy zzzz</p>";
                _doc.addEventListener("dragover",InsertImage,false);

        }

    </script>
</head>
<body onLoad="init()">
    <div style="position:absolute;top:300px;left:100px ">
        <p> this si a testing doc.here, we test the things</p>
    </div>
</body>

Is is not working.. In chrome console , I get this error message: 在Chrome控制台中，我收到此错误消息：

Uncaught Error: WRONG_DOCUMENT_ERR: DOM Exception 4 未捕获的错误：WRONG_DOCUMENT_ERR：DOM异常4

Something wrong with selection and range, i guess. 我猜选择和范围有问题。

Answer 1

A DOMException.WRONG_DOCUMENT_ERR exception is thrown whenever a DOM manipulation method tries to work with nodes that are part of two different DOMDocuments . 每当DOM操作方法尝试使用属于两个不同DOMDocuments的节点时，都会引发DOMException.WRONG_DOCUMENT_ERR异常。 You must use the DOMDocument.importNode method in order to import a DOMNode from one document to another. 为了将 DOMNode从一个文档导入到另一个文档，必须使用DOMDocument.importNode方法。

I suppose you have to import the image-node to the iFrame-document 我想您必须将图像节点导入到iFrame文档中

something like (untested): 像（未经测试）：

var nodeToImport = _doc.importNode(_image, true);
//nodeToImport can now be added to the second document
 _doc.appendChild(nodeToImport);

more here 这里更多

在Chrome中拖放图片

问题描述

1 个解决方案

解决方案1
1 已采纳 2011-05-15 13:47:20

在Chrome中拖放图片

问题描述

1 个解决方案

解决方案1 1 已采纳 2011-05-15 13:47:20

解决方案1
1 已采纳 2011-05-15 13:47:20