2011-05-15 8 views
2

Chrome의 iframe에 이미지 드래그 앤 드롭 스크립트를 작성하려고합니다. 크롬 콘솔에서Chrome에서 이미지 드래그 앤 드롭

<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> 

작동하지 않는가요 .. , 나는이 오류 메시지가 얻을 : 선택과 범위 문제

Uncaught Error: WRONG_DOCUMENT_ERR: DOM Exception 4

뭔가, 나는 생각한다. 시도 는 DOM 조작 방법은 두 개의 서로 다른 DOMDocuments의 일부 노드와을 작업 할 때마다

답변

1

DOMException.WRONG_DOCUMENT_ERR 예외가 발생합니다. DOMNode를 한 문서에서 다른 문서로 가져 오려면 DOMDocument.importNode 메서드를 사용해야합니다.

난 당신이 iframe이 문서에 (검증되지 않은) 같은

뭔가 이미지 노드를 가져올 수 있다고 가정

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

more here

+0

감사 캐스퍼는, 지금 일을, 유일한 "** _ doc.appendChild (nodeToImport); **"관련 장소에서 사용해야했습니다. – Mickey