php-resource



Zurück   PHP-Scripte PHP-Tutorials PHP-Jobs und vieles mehr > Entwicklung > HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS
 

Login

 
eingeloggt bleiben
star Jetzt registrieren   star Passwort vergessen
 

 

 


HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS Probleme mit HTML5, Bootstrap oder jQuery ?

Antwort
 
LinkBack Themen-Optionen Bewertung: Bewertung: 1 Stimmen, 5,00 durchschnittlich.
  #1 (permalink)  
Alt 23-07-2009, 17:39
squirrelcgn
 Registrierter Benutzer
Links : Onlinestatus : squirrelcgn ist offline
Registriert seit: Sep 2005
Ort: koeln.nrw.de
Beiträge: 125
squirrelcgn ist zur Zeit noch ein unbeschriebenes Blatt
Standard HTML-Code der aktuellen Auswahl

Hallo zusammen,

bin schon seit Tagen auf der Suche nach einem geeigneten Ansatzpunkt für ein (wahrscheinlich kleines) Problem - mittlerweile bin ich mir sicher, dass JavaScript die beste/einzige Sprache sein dürfte, mit der das Problem überhaupt lösbar ist.

PROBLEM
Man markiert (mit der Maus) auf einer im Browser angezeigten Webseite ein kleines Stück Text. Nun möchte ich erreichen, dass der gesamte "übergeordnete HTML-Tag" (inklusive parameter und content) extrahiert/gespeichert wird. Im folgenden ein einfaches Beispiel.

BEISPIEL

(1.) Text/Textteil auswählen


(2.) Button klicken oder evtl. via EventHandler Punkt (3.) anstoßen.


(3.) Es wird der "übergeordnete HTML-Tag" ermittelt (und gespeichert)



Es wäre super, wenn mir jemand hier (vielleicht sogar aus eigener Erfahrung) einen Tipp geben könnte, wie ich hier einsteigen/herangehen sollte.

Vielen Dank im Voraus und Grüße,
Christian
Mit Zitat antworten
  #2 (permalink)  
Alt 23-07-2009, 18:07
AmicaNoctis
  Moderatorin
Links : Onlinestatus : AmicaNoctis ist offline
Registriert seit: Jul 2009
Beiträge: 5.709
Blog-Einträge: 9
AmicaNoctis sorgt für eine eindrucksvolle AtmosphäreAmicaNoctis sorgt für eine eindrucksvolle Atmosphäre
Standard Ranges

Hallo Christian,

das macht man mit sogenannten Ranges

im IE: TextRange Object

im Firefox: https://developer.mozilla.org/en/DOM/Selection

das W3C sagt: Document Object Model Range

Gruß,

Anja
Mit Zitat antworten
  #3 (permalink)  
Alt 23-07-2009, 18:15
squirrelcgn
 Registrierter Benutzer
Links : Onlinestatus : squirrelcgn ist offline
Registriert seit: Sep 2005
Ort: koeln.nrw.de
Beiträge: 125
squirrelcgn ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Vielen Dank, Anja! Dein Tipp ist Gold wert! Da werde ich mich jetzt mal intensiv reinlesen.

Grüße,
Christian
Mit Zitat antworten
  #4 (permalink)  
Alt 23-07-2009, 21:26
squirrelcgn
 Registrierter Benutzer
Links : Onlinestatus : squirrelcgn ist offline
Registriert seit: Sep 2005
Ort: koeln.nrw.de
Beiträge: 125
squirrelcgn ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Hallo zusammen,
hallo Anja,

bin jetzt schon recht weit gekommen, aber hänge an einer Stelle fest. Vielleicht könnt ihr mich kurz schubsen... ;-) Der folgende HTML-Code funktioniert in FF und Opera.

Code:
<html>

<head>

	<script type="text/javascript">
			
		function showSelection() {
			// (*)
			var selObj = window.getSelection(); 
			alert(selObj);
			//var selRange = selObj.getRangeAt(0);
			
			// (**)
			var anchorNode = selObj.anchorNode;
			var parentNode = anchorNode.parentNode;
			alert(parentNode);
		}
		
	</script>

</head>

<body>
	
	<p>Hier steht Text. Und noch mehr Text. Und noch viel mehr Text...</p>
	
	<input type="button" value="Start" onclick="showSelection()">
	
</body>

</html>
Ich würde ja gerne erreichen, dass beim zweiten alert (im Teil (**) im Code) nicht "object HTMLParagraphElement" ausgegeben wird, sondern eben der GESAMTE ParagraphElement ansich, also "<p>Hier steht Text. Und noch mehr Text. Und noch viel mehr Text...</p>". Leider klappt es auch bei Anwendung von "toString()" nicht.

Die von Anja genannte Site https://developer.mozilla.org/en/DOM/Selection ist sehr gut, aber ich finde dort leider nicht die von mir gesuchte property/method.

Bin für jeden Tipp sehr dankbar!

Viele Grüße!
Mit Zitat antworten
  #5 (permalink)  
Alt 23-07-2009, 22:03
Kropff
  Administrator
Links : Onlinestatus : Kropff ist offline
Registriert seit: Mar 2002
Ort: Köln
Beiträge: 11.722
Kropff befindet sich auf einem aufstrebenden Ast
Standard

Erstens. Benenne Variablen nie wie JavaScript-Eigenschaften/-Methoden! Ganz böse! Also lieber so:
PHP-Code:
var anch selObj.anchorNode;
var 
par  anch.parentNode;
alert(par); 
Und nun zu deiner Frage. Da gibt es zwei Möglichkeiten. Erstens
PHP-Code:
// Ungetestet
alert (par.innerHTML); 
oder du gehst komplett über das DOM und schnipselst dir alles zusammen. Also mit firstChild und nodeValue/data. Eine Übersicht dazu findest du bei mir

Peter
__________________
Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
Meine Seite
Mit Zitat antworten
  #6 (permalink)  
Alt 23-07-2009, 22:21
squirrelcgn
 Registrierter Benutzer
Links : Onlinestatus : squirrelcgn ist offline
Registriert seit: Sep 2005
Ort: koeln.nrw.de
Beiträge: 125
squirrelcgn ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Wow!! Danke, Peter! Deine Website ist ja der Hammer, eine wahre Fundgrube!

Sehe ich es richtig, dass ich nicht drum herum komme, die Tags "beim Namen zu nennen"? Muss ich zwingend die Namen der Tags angeben, also z.B. getElementByTagName("p").firstChild.nodeValue? Kann ich das getElementByXY() vermeiden?

Zusammenfassend kann ich das Problem jetzt umformulieren:
Wie kann ich den gesamten umgebenen Tag (mit Tag-Zeichen (<, >), properties und content) einer Range ausgeben?

Danke und Grüße!

Geändert von squirrelcgn (23-07-2009 um 23:39 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 23-07-2009, 22:59
AmicaNoctis
  Moderatorin
Links : Onlinestatus : AmicaNoctis ist offline
Registriert seit: Jul 2009
Beiträge: 5.709
Blog-Einträge: 9
AmicaNoctis sorgt für eine eindrucksvolle AtmosphäreAmicaNoctis sorgt für eine eindrucksvolle Atmosphäre
Standard

Wenn ein Element ein ID-Attribut hat, kannst du es auch mit
Code:
document.getElementById("deineID")
ansprechen.

Elemente in der Nähe eines auf die Art geholten erreichst du über

Code:
deinElement.parentNode
deinElement.previousSibling
  deinElement.nextSibling
     deinElement.firstChild
         deinElement.lastChild
              deinElement.childNodes[deinIndex]
Theoretisch kannst du damit von document ausgehend auch alle Knoten erreichen, das kann aber schnell unübersichtlich werden
Mit Zitat antworten
  #8 (permalink)  
Alt 23-07-2009, 23:12
Kropff
  Administrator
Links : Onlinestatus : Kropff ist offline
Registriert seit: Mar 2002
Ort: Köln
Beiträge: 11.722
Kropff befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von squirrelcgn Beitrag anzeigen
Sehe ich es richtig, dass ich nicht drum herum komme, die Tags "beim Namen zu nennen"? Muss ich zwingend die Namen der Tags angeben, also z.B. getElementByTagName("p").firstChild.nodeValue? Kann ich das getElementByXY() vermeiden?
Wie du es machst, ist deine Entscheidung. JavaScript läßt dir da leider/gottseidank viele Freiheiten. Mein Tipp. Verpass den wirklich wichtigen Elementen eine ID und arbeite mit document.getElementById.

Peter
__________________
Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
Meine Seite
Mit Zitat antworten
  #9 (permalink)  
Alt 23-07-2009, 23:42
squirrelcgn
 Registrierter Benutzer
Links : Onlinestatus : squirrelcgn ist offline
Registriert seit: Sep 2005
Ort: koeln.nrw.de
Beiträge: 125
squirrelcgn ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Danke Euch Peter und AmicaNoctis!

Ich MUSS es aber leider komplett ohne ID-Neuvergabe lösen! Das ist leider unumgänglich... :-( Ich muss quasi davon ausgehen, dass ich die Struktur des gesamten Dokumentes nicht kenne. Meine Idee ist ja: von der markierten Stelle "eine Ebene nach oben gehen" und schon hat man den gesamten "übergerodneten HTML-Tag". Aber ich glaube das ist gar nicht so einfach... (oder ich drücke mich die ganze Zeit unscharf aus).

Im Prinzip würde es doch auch reichen, wenn ich es hinbekommen würde die POSITION im HTML-Code (als Integer) zu ermitteln, an der die Range beginnt!

Habt ihr dazu vielleicht eine Idee?

Danke und Grüße!
Mit Zitat antworten
  #10 (permalink)  
Alt 23-07-2009, 23:51
AmicaNoctis
  Moderatorin
Links : Onlinestatus : AmicaNoctis ist offline
Registriert seit: Jul 2009
Beiträge: 5.709
Blog-Einträge: 9
AmicaNoctis sorgt für eine eindrucksvolle AtmosphäreAmicaNoctis sorgt für eine eindrucksvolle Atmosphäre
Standard

So etwas wie eine implizite Integer-ID für alle Knoten gibt es nicht, es sei denn du baust selber eine traverse-Funktion, aber das widerspricht noch mehr der Grundlage, dass du das Dokument "nicht kennst".

"Eine Ebene nach oben gehen" ist ganz einfach:

Code:
aktuellerKnoten.parentNode
Damit bekommst du den Elternknoten. Wenn du das schon weißt, muss ich wirklich zugeben, dass du dich unscharf ausgedrückt hast

Das innerHTML hast du schon probiert, ja?
Mit Zitat antworten
  #11 (permalink)  
Alt 24-07-2009, 00:05
squirrelcgn
 Registrierter Benutzer
Links : Onlinestatus : squirrelcgn ist offline
Registriert seit: Sep 2005
Ort: koeln.nrw.de
Beiträge: 125
squirrelcgn ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Okay, danke AmicaNoctis! Sowohl parentNode als auch innerHTML hatte ich bereits ausprobiert, leider ohne Erfolg.

Ich frage mal ganz direkt und herausfordernd: wie würdest du/würdet ihr denn das im Anfangspost geschilderte Problem lösen? Vielleicht gibt es ja jemanden, der das in 2 Minuten hinbekommt und sich etwas dazuverdienen möchte? ;-)

Danke und Grüße!!
Mit Zitat antworten
  #12 (permalink)  
Alt 24-07-2009, 00:10
AmicaNoctis
  Moderatorin
Links : Onlinestatus : AmicaNoctis ist offline
Registriert seit: Jul 2009
Beiträge: 5.709
Blog-Einträge: 9
AmicaNoctis sorgt für eine eindrucksvolle AtmosphäreAmicaNoctis sorgt für eine eindrucksvolle Atmosphäre
Standard

Dafür wären mindestens noch zwei Sachen interessant:

1. Warum speicherst du den HTML-Code des übergeordneten Elements? Vielleicht hast du ja damit was vor, was sich besser lösen lässt, wenn du das Elementobjekt speicherst?

2. Was soll passieren, wenn man über Elementgrenzen hinweg selektiert hat? Theoretisch kann die Selektion einen Teilbaum enthalten und nicht nur einen Knoten oder Teil davon.
Mit Zitat antworten
  #13 (permalink)  
Alt 24-07-2009, 03:01
squirrelcgn
 Registrierter Benutzer
Links : Onlinestatus : squirrelcgn ist offline
Registriert seit: Sep 2005
Ort: koeln.nrw.de
Beiträge: 125
squirrelcgn ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Hallo zusammen,
hallo AmicaNoctis,

habe gerade versucht, Antworten auf AmicaNoctis' Fragen zu formulieren, da ist mir eingefallen, dass das Problem vllt. von einer ganz anderen Seite angegangen werden sollte...

Was ich "nachbauen" möchte ist im Prinzip EXAKT das gleiche, was passiert, wenn man in Firefox das Addon "Firebug" installiert und dort im Modus "Untersuchen" ("Inspector") mit der Maus über die aktive Website "fliegt": es werden (inder oberen Screenhälfte) alle Tags gehighlightet, die man mit der Maus berührt und (in der unteren Screenhälfte) die kompletten zugehörigen Tags angezeigt. (Firebug: https://addons.mozilla.org/de/firefox/addon/1843)

Im Prinzip möchte ich diese Funktion "nur" so erweitern, dass man, wenn man einen Tag/Text mit Firebug-Inspector gehighlightet hat, durch simples Klicken den Inhalt des Code-Inspectors (untere Hälte des Firebug-Screens) irgendwie abspeichern kann.

Kannst du / könnt ihr das nachvollziehen? Ich hoffe das ist nicht allzu verwirrend! ;-)

Da Firebug open source ist, habe ich mir mal den code des "Firebug Inspectors" (inspector.js) angeschaut: http://code.google.com/p/fbug/source...g/inspector.js Allerdings ist das für mich derart komplex und unübersichtlich, dass ich den "missing link" für mein Puzzle leider dort nicht identifizieren kann.

Kann mir jemand dabei helfen?

Danke und Grüße!

Geändert von squirrelcgn (24-07-2009 um 03:09 Uhr)
Mit Zitat antworten
  #14 (permalink)  
Alt 24-07-2009, 03:26
AmicaNoctis
  Moderatorin
Links : Onlinestatus : AmicaNoctis ist offline
Registriert seit: Jul 2009
Beiträge: 5.709
Blog-Einträge: 9
AmicaNoctis sorgt für eine eindrucksvolle AtmosphäreAmicaNoctis sorgt für eine eindrucksvolle Atmosphäre
Standard

also brauchst du den Umweg über die Selection/Ranges eigentlich gar nicht, wenn dir das Hovern schon reicht und du z. B. mit STRG+C das gewählte Element in die Zwischenablage bekommst?

Als Beispiel (so was ähnliches mit hovering, aber ohne Zwischenablage) hätte ich ein Bookmarklet für dich, was ich mal geschrieben hab, um Layer-Ads wegzumachen ("Schließen" bedeutet bei denen manchmal das Gegenteil) und um Seiten in eine Druckversion zu überführen (Bilder und Navigation entfernen).

Das Teil funktioniert so: du aktivierst das Bookmarklet (aka Favelet) und hoverst über die Seite. Das Element unter der Maus wird jeweils hervorgehoben. Wenn du es löschen willst, drückst du ENTF und hoverst weiter oder beendest das ganze mit ESC.

Hier der "Link" (ohne '):
'javascript:void((function(){var%20s=document.body.appendChild(document.createElement("script"));s.t ype="text/javascript";s.src="http://sedna-soft.de/js/favelet/remove-elements.js";})());'

ACHTUNG: irgendwie macht die Forensoftware bei "s.type" immer ein Leerzeichen rein, das muss natürlich weg! Ich bekomme es einfach nicht weg, obwohl es ja nie da war.

Hier der Quelltext: http://sedna-soft.de/js/favelet/remove-elements.js

Du musst dann nur noch document.onkeydown an deine Bedürfnisse anpassen. Wenn du dann wieder nicht weiterkommst, kannste dich ja immer nochmal melden...

Nur so nebenbei: statt Geld würde ich mich über eine positive Bewertung freuen

Geändert von AmicaNoctis (24-07-2009 um 03:30 Uhr)
Mit Zitat antworten
  #15 (permalink)  
Alt 25-07-2009, 01:21
squirrelcgn
 Registrierter Benutzer
Links : Onlinestatus : squirrelcgn ist offline
Registriert seit: Sep 2005
Ort: koeln.nrw.de
Beiträge: 125
squirrelcgn ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Hi Anja,

vielen, vielen Dank! Dein Skript ist genau was ich gesucht habe!!!

Jetzt habe ich stundenlang herumprobiert, und befürchte, dass ich jetzt vor dem GLEICHEN Problem stehe wie vorher ("mein" Lösungsansatz)... (ich möchte ja erreichen, dass der gesamte HTML-Code, welcher gerade gehovert ist, ausgegeben/gespeichert wird).

Habe den "document.onkeydown"-Handler so erweitert:

Code:
else if (pEvent.keyCode == 32 && currentNode && currentNode.nodeType == 1) {
			alert(currentNode.text);
		}
(also wenn man "SPACE (32)" drückt, soll der gesamte HTML-Code des currentNode ausgegeben werden)

...und auch currentNode.toString() funktioniert nicht. :-(


Bin ich schon wieder auf dem Holzweg, oder kannst du mir einen Tritt verpassen? ;-)

Danke und Grüße,
Christian

Geändert von squirrelcgn (25-07-2009 um 01:24 Uhr)
Mit Zitat antworten
Antwort

Lesezeichen

Stichworte
auswahl, embracing, html, selection


Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
 

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
[HTML] HTML Code erlaubt!Aber "@" gesperrt!Wie umgehen? phpMorpheus2 HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 2 16-05-2008 00:52
[HTML] HTML code soll als Text ausgegeben werden Alex182 HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 4 11-04-2007 14:50
PHP-Code in HTML-Code, wie geht es? 6driver PHP Developer Forum 19 28-01-2006 18:21
[HTML] Probleme mit der SELECT Auswahl Alpenmerlin HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 4 17-02-2004 21:06
PHP/HTML-Code mnhg PHP Developer Forum 35 09-01-2003 18:58

Themen-Optionen
Thema bewerten
Thema bewerten:

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are an


PHP News

ebiz-trader 7.5.0 mit PHP7 Unterstützung veröffentlicht
ebiz-trader 7.5.0 mit PHP7 Unterstützung veröffentlichtDie bekannte Marktplatzsoftware ebiz-trader ist in der Version 7.5.0 veröffentlicht worden.

28.05.2018 | Berni

Wissensbestand in Unternehmen
Wissensbestand in UnternehmenLebenslanges Lernen und Weiterbilden sichert Wissensbestand in Unternehmen

25.05.2018 | Berni


 

Aktuelle PHP Scripte

ADSMAN V3 - Werbe-Manager ansehen ADSMAN V3 - Werbe-Manager

ADSMAN V3 - mehr als nur ein Bannermanager! Banner, Textanzeigen und PagePeel Manager! Mit ADSMAN PRO haben Sie die Marketinglösung für eine effektive und effiziente Werbeschaltung mit messbaren Ergebnissen. Unterstützt werden Bannerformate in beliebi

25.10.2018 virtualsystem | Kategorie: PHP/ Bannerverwaltung
PHP News und Artikel Script V2

News schreiben, verwalten, veröffentlichen. Dies ist jetzt mit dem neuen PHP News & Artikel System von virtualsystem.de noch einfacher. Die integrierte Multi-User-Funktion und der WYSIWYG-Editor (MS-Office ähnliche Bedienung) ermöglichen...

25.10.2018 virtualsystem | Kategorie: PHP/ News
Top-Side Guestbook

Gästebuch auf Textbasis (kein MySQL nötig) mit Smilies, Ip Sperre (Zeit selbst einstellbar), Spamschutz, Captcha (Code-Eingabe), BB-Code, Hitcounter, Löschfunktion, Editierfunktion, Kommentarfunktion, Kürzung langer Wörter, Seiten- bzw. Blätterfunktion, V

22.10.2018 webmaster10 | Kategorie: PHP/ Gaestebuch
 Alle PHP Scripte anzeigen

Alle Zeitangaben in WEZ +2. Es ist jetzt 04:25 Uhr.