Manuel: Link soll öffnen im <div> namens "Information"!

Hi. Wie öffne ich mit Link namens Kontakt ein externe WebSeite namens Kontakt.html in dem <div> namens "Information" ?

Sollte eigentlich funktionieren, ich hab alles richtig gemacht, aber will nicht. Sondern öffnet die Seite extern.

<html><head></head>

<body lang="DE" style="
	display: block;  
	margin:0px; padding:0px; border:none; outline: none;
	height: 100%;top:0px;left:0px;right:0px;bottom:0px; 
	background-image: url('funk1111.gif');
	background-color:rgb(1, 4, 16);
	font-size:14px; font-family: Arial, Helvetica, sans-serif;
">

<div id="StartLinks" style="
	overflow:hidden; 
	background-color: rgba(0, 8, 51, 0);
	z-index:100; 
"> 

	<a class="MenuLink" href="Kontakt.html" target="Information">@Kontakt</a>
</div>

<div id="Information" class="Information" style="padding:16px;">
</div>
</body>
</html>
  1. Hallo,

    mit target öffnest du eine Seite in einem (neuen) Tab/Fenster mit entsprechendem Namen. Was du suchst, ist evtl. ein Iframe.

    Beschreib mal, was du vorhast.

    Gruß
    Jürgen

    1. Habe vor, man soll den Link anklicken können, der soll im Div "Information" einen Inhalt/ html Dokumen laden.

      //Beschreib mal, was du vorhast.

      1. Hallo,

        das geht so nicht. Wenn du eine Seite in einer anderen Seite öffnen willst, geht das mit einem iframe. Aber ich würde mir die Verwendung von Frames oder Iframes genau überlegen. Meistens hast du danach mehr Probleme als vorher.

        Warum willst du die Seite „Kontakt.html“ innerhalb der aufrufenden Seite öffnen, warum nicht einfach im aktuellen Browserfenster?

        Gruß
        Jürgen

      2. Hallo Manuel,

        ich hab alles richtig gemacht

        Das ist eine kühne, und falsche, Behauptung.

        Eine fremde Seite in einem <div> zu öffnen ist ein Kunststück, das nur in Ausnahmefällen gelingt. Das ist nämlich keine Standardfunktion der Browser. Man kann eine HTML Ressource mit Ajax-Techniken (XMLHttpRequest oder Fetch-API) einlesen und das darin vorhandene Markup in ein DIV einsetzen. Aber nicht so ohne weiteres. Eine fremde Seite besteht aus head und body, und was im head steht, gehört nicht in ein div. Und der Inhalt des fremden body ist normalerweise nicht darauf ausgelegt, in einem div eingebettet zu werden. D.h. du musst die fremde Seite mit JavaScript so umbauen, dass sie in dein <div> passt. Sowas lässt man besser bleiben.

        Normalerweise tut man sowas nämlich nur dann, wenn man für seine eigene Seite von seinem eigenen Server HTML Fragmente nachlädt. Die kann man mundgerecht für ein div erzeugen.

        Eine fremde Seite legt man, wie Jürgen schrieb, in einen iframe, nicht in ein div. Und das Legen erfolgt mit etwas JavaScript, um das src-Attribut des iframe zu setzen.

        Rolf

        --
        sumpsi - posui - obstruxi
        1. Hallo Rolf,

          Eine fremde Seite legt man, wie Jürgen schrieb, in einen iframe, nicht in ein div. Und das Legen erfolgt mit etwas JavaScript, um das src-Attribut des iframe zu setzen.

          dazu braucht man kein Javascript, target und name für den iframe reichen. Aber Manuel soll uns erst mal verraten, warum er das so will und nicht klassisch verlinkt. Frames und Iframes sind nämlich nichts für Anfänger.

          Gruß
          Jürgen

        2. Ein Nachtrag.

          Du willst ja gar keine fremde Seite laden, sondern deine kontakt.html in die Informationsbox laden.

          Wenn Du diese kontakt.html als Fragment schreibst, also ohne <html> und <body>, als reinen DIV Inhalt, dann kann man sowas machen. Man benötigt dafür aber auf jeden Fall JavaScript. Und damit stellt sich die Frage, ob eine Webseite so gebaut sein sollte. Es ist nämlich nicht überall JavaScript aktiv, und in dem Fall ist deine Kontakt-Seite nicht erreichbar. Deine Impressumsseite auch nicht, wenn Du es da genauso machst - und das kann je nach Zweck deiner Seite dann richtig Ärger geben. Deswegen: Vorsicht damit. Du brauchst auf jeden Fall einen Fallback, der ohne JavaScript funktioniert, und das hat zur Konsequenz, dass Du dein Kontakt-HTML zweimal schreibst oder serverseitig Tricks einsetzen musst, um bei inaktivem JavaScript deine Kontakt-fragment in den erforderlichen Seitenrahmen einzubauen. SSI kommt da in den Sinn, oder PHP.

          Was Du mit JavaScript tun musst:

          • Registrieren eines click-Listeners auf dem Link Element
          • Im Click-Handler das Kontakt-Fragment per fetch oder XMLHttpRequest anfordern
          • Die Reaktion auf den click abbrechen (preventDefault Methode des Event-Objekts)

          Im Response-Handler von Fetch/XMLHttpRequest findest Du dann das HTML Fragment und kannst es als innerHTML ins Informations-DIV einsetzen. Das ist alles nicht so ganz einfach. Wenn Du gar kein JavaScript kannst, dann ist das eine Nummer zu groß für Dich und der Link auf die Homepage unseres Wiki als "Tutorial" tatsächlich der beste erste Schritt.

          Was Du nicht erwarten kannst, ist, dass hier irgendwer eine fertige Lösung dafür zum Abschreiben hinstellt.

          Rolf

          --
          sumpsi - posui - obstruxi
  2. Hallo Manuel,

    Sollte eigentlich funktionieren, ich hab alles richtig gemacht, aber will nicht.

    „alles“ bestimmt nicht. Inlinestyles solltest du vermeiden, den Inhalt des head-Elements hast du sicher nur nicht mitkopiert (viewport-Angabe), 0px ist dasselbe wie 0, für das body-Element ist display:block der default, ebenso border und outline

    Aber deine Antwort dort nimmt mir grade die Lust auf weitere Hinweise.

    Bis demnächst
    Matthias

    --
    Du kannst das Projekt SELFHTML unterstützen,
    indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
    1. HTML Beispiel Code oder Tutorial? Danke.

      1. HTML Beispiel Code oder Tutorial? Danke.

        https://wiki.selfhtml.org/

  3. Hast Du den Inhalt schon fertig der in das div da rein soll? MFG