Per JavaScript HTML-Elemente (Text, Steuerelemente, Bilder, etc.) kopieren

T

tschroeder

Mitglied
Hallo,

bin hier fast am Verzweifeln. Google wie ein Wahnsinniger, aber bin für sämtliche Foren-Posts und Dokus zu behindi :-(

Problem:

Befinde mich in einem Window-Objekt, das einen Iframe enthält (Name: iframe_insert).
Nun möchte ich wissen, ob folgende Möglichkeiten bestehen:

- Einen Text aus dem Ursprungsfenster (im body) in den Iframe zu kopieren (nicht in ein Steuerelement, sondern in das "document").

- Noch doller: Könnte ich ganze Objekte, bspw. Steuerelemente, Bilder, komplette div's, den body, den kompletten Inhalt des Ursprungsfensters in den Iframe kopieren?

Habe eine ganze Weile rumprobiert, mit CreateRange(), execCommand('Copy') und execCommand('Paste').
Mir fehlt aber der Überblick, der Zusammenhang, ein roter Faden, das "große Ganze"... und nach stundenlangem Googlen hängt mir jetzt die Zunge raus.

Gibt es irgendwo eine Doku, die alles umfasst (und die ich verstehe)?
Habe regulär kein Problem mit JavaScript, die Grundlagen sind vorhanden, da ich viel client-seitig mit JavaScript mache.
Nur das obige Thema ist komplett neu für mich. Habe nur gehört, dass diese ganzen Funktionen v.a. bei browserbasierten WYSIWYG-Editoren zum Einsatz kommen.

Der Code braucht bei mir nur im IE zu funktionieren.
Wäre für eine Intranet-Anwendung, die ohnehin den IE voraussetzt (auch wegen unzähliger Modaler Dialoge, client-seitigem ActiveX usw.).

Freue mich auf Feedback. Vielleicht komme ich ja einen Schritt weiter...

Gruß aus dem sonnigen Stuttgart

Thomas
 
Moin Thomas,

das geht schon irgendwie. Wie man es am Besten angeht, hängt davon ab, was du im Endeffekt eigentlich vorhast, hier mal ein Beispiel, welches quasi wie ein WYSIWYG-Editor funktioniert.

Code: 
<html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; 
                                charset=ISO-8859-1"   />
<meta name="author"             content="doktormolle" />
<meta name="date"               content="2008-12-30"  />
<title>Test</title>
<style type="text/css">
<!--
#body{position:relative;margin-bottom:12px;}
#body div,#body span{position:absolute;}

-->
</style>
</head>
<body>
<iframe src="frame.htm" width="600" height="400"></iframe>
 <div id="body" contenteditable="true" ondragstart="return false" oncut="return false" onpaste="return false"> 
 
    <div style="border:2px dotted red" >
    
      <span>ein komplettes Div zum Kopieren, oder bei Bedarf auch nur ein span </span><br><br>
      <select>
        <option>ein Steuerelement zum Kopieren
      </select>
      <iframe src="http://www.google.de" width="200" height="200"></iframe>
    </div>
 </div>  


</body>
</html>

Das iframe zu Beginn ist das, welches den Inhalt empfangen soll, es muss sich im designMode befinden, frame.htm sollte also bspw. so aussehen:
Code: 
<html>
<head>
<title>Test</title>
</head>
<body contenteditable="true">
</body>
</html>

Der kopierbare Inhalt wurde in einen separaten Container verfrachtet, welcher wiederum auch editierbar ist(die Möglichkeit des Verschiebens/Auschneidens/Einfügens wurde dabei abgestellt, du willst die Inhalte ja nur kopieren.(zum Abstellen der Lösch-Option hab ich leider keine Lösung parat :-) )

Du kannst jetzt innerhalb des div#body alles auswählen und kopieren...und dann per Einfügen in das iFrame verfrachten. Eine unschöne Einschränkung: um Box-Elemente komplett auswählen zu können(also bspw. div oder span), müssen diese absolute positioniert sein, daher auch die entsprechende CSS-Rule.

Ich hoffe, das bringt dich ein wenig weiter...zum Herumprobieren sollte es aber schon mal langen :-)
 
Hallo Sven,

sorry, war mein Fehler: wie man eine Seite editierbar macht (für den Anwender), das hab' ich raus. Schätze aber, dass brauche ich gar nicht.

Es geht mir um das automatisierte Kopieren von HTML-Elementen oder ganzen Dokumenten. Es gibt da eine Reihe von Funktionen, die ich noch nicht kenne: CreateRange() und execCommand(). Ich möchte sowas wie eine Snapshot-Funktion anbieten - innerhalb meines Projektes und natürlich nur client-seitig.

Das Thema "WYSIWYG-Editor" habe ich nur erwähnt, weil ich bei einem solchen entdeckt habe, dass er mit diesen Funktionen arbeitet, um HTML-Elemente hin und her zu kopieren und zu verschieben.

Ich glaube, wenn ich mit CreateRange() und execCommand() arbeite, muss das Dokument gar nicht im Edit-Modus sein.

Kennst Du Dich mit diesen Funktionen aus? Ich vermute, die JS-Hilfe bei MSDN ist für mich zu abstrakt. Mir reicht es eben nicht, zu wissen, wie der Code aussieht, ich muss auch wissen, wo und wann ich welche Funktion brauche.

Gruß

Thomas
 
Das direkte verschieben von Knoten über unterschiedliche Dokumente hinweg ist etwas problematisch im IE.

Was allerdings problemlos geht...du kannst per outerHTML die HTML-Source eines Elementes ermitteln, und diesen String im iFrame einfügen.

Du kannst auch, ohne die Elemente selbst ansprechen zu müssen, einen Bereich in der Seite per Hand markieren, und dessem HTML-Source wiederum abfragen und einfügen.
In dem Fall müsstest du die createRange()-Methode auf das selection-Objekt anwenden und die Eigenschaft htmlText abfragen
Code: 
document.selection.createRange().htmlText


Hier nen kleines Beispiel:
Code: 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; 
                                charset=ISO-8859-1"   />
<meta name="author"             content="doktormolle" />
<meta name="date"               content="2008-12-30"  />
<title>Test</title>
<script type="text/jscript">
function copyToFrame(f)
{
  window.focus();
  try{
      if(document.selection.createRange().htmlText!='')
        {
          with (window.frames[f].document)
            {
              open();
              write(document.selection.createRange().htmlText);
              close();
            }
         }
      }
  catch(e)
      {
        alert("da ist was schiefgelaufen");
      }
}
</script>
</head>
<body>
<input type="button" onclick="copyToFrame('iframe_insert')" value="copyToFrame()">
<div>
  <span>
    Testtext
  </span>
  <iframe width="200" height="200" src="http://www.google.de"></iframe>
  <select>
    <option>blubb
  </select>
</div> 

<iframe width="600" height="400" name="iframe_insert"></iframe>

</body>
</html>
 
Hallo,

schönen Dank für die Infos. Die Idee, den "OuterHTML" - Code zu klauen, hatte ich auch schon. Geht vor allem sehr einfach.

Ich hatte irgendwie die seltsame Idee, dass mit execCommand('Copy') und execCommand('Paste') ein echter Screenshot von einer Bildschirmmaske möglich ist. Aber so wie es scheint, hatte ich da viel zuviel Fantasie :-)

Irgendwie lustig: Ich dachte, wenn ich die Möglichkeit hätte, den Inhalt eines Iframes oder eines kompletten Fensters in die Zwischenablage zu kopieren und dann in einem Iframe auszulesen, müsste ja sowas ähnliches wie ein Screenshot rauskommen...

Is' aber nicht schlimm, ich habe gesehen, dass "OuterHTML" exakt den Quellcode enthält, der zum Zeitpunkt des Kopiervorgangs im Browser ist.
Nicht der Quellcode, der beim Laden der Seite zum Client übertragen wurde, sondern der "wirklich aktuelle" Quellcode. Das ist also in der Tat ein "echter" Snapshot.

Noch einmal vielen Dank für die Tips und einen guten Rutsch

Gruß aus Stuttgart

Thomas
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück