externes html dokument mit JS einbinden @ tutorials.de: Tutorials, Forum & Hilfe

Eli- · 29.05.11 09:30

hi,
ich möchte gerne eine externe html Datei mit JS auf meine Webseite einbinden. ich weiß leider nicht wie.
Ich hoffe ihr könnt mir helfen

schon mal danke und liebe Grüße

Dennis

**chmee** · 29.05.11 09:50

Einerseits ein iframe,
andererseits das Nachladen und Einbinden per AJAX.

Vorteil iframe, es darf eine komplette HTML-Seite (inkl. Header und Metadaten etc pp) sein. Das Nachladen und Einbinden in ein Div möchte nur HTML-Daten haben, aber es sollte keinen HTML-Seitenaufbau haben. Man könnte auch Beides verbinden und per Javascript ein iframe erzeugen und darin die externe Seite anzeigen.

Link - http://www.google.com/search?hl=de&q...ax+iframe&aq=f

mfg chmee

**ComFreek** · 29.05.11 10:10

Allerdings kann man mit AJAX nicht Seiten von anderen Domains abrufen.
Dann müsste man mit AJAX ein PHP-Skript auf dem gleichen Server ansprechen, das dann die externe Seite lädt.

Eli- · 29.05.11 10:54

Einerseits ein iframe,
andererseits das Nachladen und Einbinden per AJAX.

Vorteil iframe, es darf eine komplette HTML-Seite (inkl. Header und Metadaten etc pp) sein. Das Nachladen und Einbinden in ein Div möchte nur HTML-Daten haben, aber es sollte keinen HTML-Seitenaufbau haben. Man könnte auch Beides verbinden und per Javascript ein iframe erzeugen und darin die externe Seite anzeigen.

Link - http://www.google.com/search?hl=de&q...ax+iframe&aq=f

mfg chmee

bloß in Firefox 4 gehen Iframes nicht mehr. Und mit ajax kenne ich mich nicht aus

Allerdings kann man mit AJAX nicht Seiten von anderen Domains abrufen.
Dann müsste man mit AJAX ein PHP-Skript auf dem gleichen Server ansprechen, das dann die externe Seite lädt.

PHP geht bei meiner seite nicht.

Und ich möcht nur einen kleinen code einbinden, ähmlich den da:

HTML-Code:

<div class="inhalt">
    <span style="color: #000000;">
Allgemeines || 1.Jobchange || 2.Jobchange || Builds || Masterquest || Heroquest
<hr />
Erste Schritte || Level Infos || Sonstiges
</span>
</div>

schon mal danke
lg
Dennis

**chmee** · 29.05.11 11:11

Naja, dann ist die Antwort einfach.

(A) Die Daten müssen auf Deinem Webhost liegen.
(B) Du schaust Dir Tutorials zu Ajax an.

http://www.admin-wissen.de/tutorials...ajax-tutorial/

mfg chmee

Eli- · 29.05.11 11:28

hi
ist das dann das hier:
http://www.admin-wissen.de/eigene-tu...hrung-in-ajax/

nur statt der *.txt datei eine *.html datei?

EDIT: hab die lösung

poste es gleich

so hier der Code der hoffentlich geht.

index.html

Code :

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Dokumenttitel</title>
<script type="text/javascript">
//<![CDATA[
var XMLHTTP = null;
if (window.XMLHttpRequest) {
    XMLHTTP = new XMLHttpRequest();
} else if (window.ActiveXObject) {
    try {
        XMLHTTP =
            new ActiveXObject("Msxml2.XMLHTTP");
    } catch (ex) {
    try {
        XMLHTTP =
            new ActiveXObject("Microsoft.XMLHTTP");
    } catch (ex) {
    }
    }
}
function DatenAusgeben() {
    if (XMLHTTP.readyState == 4)  {
        var d = document.getElementById("Daten");
        var s = document.getElementById("Status");
        d.innerHTML += XMLHTTP.responseText;
        s.innerHTML += XMLHTTP.status + " (" +
                       XMLHTTP.statusText + ")";
    }
}
window.onload = function() {
    XMLHTTP.open("GET", "http://www.5xmueller.de/test.txt");
    XMLHTTP.onreadystatechange = DatenAusgeben;
    XMLHTTP.send(null);
}
//]]>
</script>
</head>
<body>
    <p id="Daten"></p>
 
</body>
</html>

test.txt

Code :

<div class="inhalt">
    <span style="color: #000000;">
Allgemeines || 1.Jobchange || 2.Jobchange || Builds || Masterquest || Heroquest
<hr />
Erste Schritte || Level Infos || Sonstiges
</span>
</div>

das ganze pack ich dann auf den Server und fertig

(hoffe ich xD)

Eli- · 29.05.11 11:42

oh geht doch nicht ;( die datei liegt hier:
http://www.demonwars.de/app/download...t?t=1306661959
(der link is so komisch, weil ich die website bei jimdo hab und man da nicht einfach dateien direkt hochladen kann.)
aber das geht dann nicht

gibt es eine möglichkeit, dass die datei nicht auf demmselben server liegen muss?

**chmee** · 29.05.11 12:15

Die Möglichkeit wurde genannt, über php eine Hilfsfunktion schreiben, die externen Zugriff zulässt. Eli, probiers einfach weiter. Hier ein weiteres Tutorial. (Ich bin nämlich mit dem blöden ActiveXObject im Sourcecode höchst unzufrieden..)

mfg chmee

Eli- · 29.05.11 12:34

ich kann leider kein php benutzen

***CPoly*** · 29.05.11 12:55

Lass uns doch nochmal darauf eingehen.

Zitat von Eli-

bloß in Firefox 4 gehen Iframes nicht mehr. Und mit ajax kenne ich mich nicht aus

Wo genau hast du diesen Unsinn her? Anbei ein Screenshot, um meine Aussage zu untermauern.

Zitat von chmee

Eli, probiers einfach weiter. Hier ein weiteres Tutorial. (Ich bin nämlich mit dem blöden ActiveXObject im Sourcecode höchst unzufrieden..)

Meinst du das ActiveX, dass auch in deinem Link verwendet wird? Ohne ActiveX gibt's kein AJAX im IE.

Eli- · 29.05.11 13:04

hi,
komisch jetzt geht es. ?-? na ja.
jetzt is dann das problem, das wenn man einen link im iframe anklickt, das er dann im iframe zum link geht, was blöd ist

***CPoly*** · 29.05.11 13:28

Nochmal zusammenfassend:

1. AJAX geht nicht Domain-übergreifend
2. IFrame sind in sich geschlossen, deshalb passiert alles nur in dem IFrame (die von dir angesprochenen Links)

Mir fällt jetzt noch eine Möglichkeit ein. Ändere den Inhalt deiner Textdatei in etwa so

Code :

injectHTML('<div class="inhalt"><span style="color: #000000;">Allgemeines || 1.Jobchange || 2.Jobchange || Builds || Masterquest || Heroquest<hr />Erste Schritte || Level Infos ||Sonstiges</span></div>');

Und binde es in deine Zielseite via Script-Tag ein

Code javascript:

1	<script src="link-zur-externen-datei" type="text/javascript"></script>

Und vor dem Script-Tag brauchst du noch ein Script mit der Funktion "injectHTML" (oder nenn Sie wie es dir passt)

Code javascript:

<script>
function injectHTML(content) {
    document.getElementById('placeholder').innerHTML = content;
}
</script>
<script src="link-zur-externen-datei" type="text/javascript"></script>

Eli- · 29.05.11 14:06

hi, danke aber es geht leider nicht da passiert nichts nur ne leere seite

**chmee** · 29.05.11 19:14

@CPoly: Und ich hab gehofft, dass sie es in IE9 endlich geschafft haben

Shame on IE

mfg chmee

**Navy** · 30.05.11 03:09

Wenn es Dir möglich ist, bau Dir Deinen eigenen Proxy auf dem System und lass diesen die Daten holen, so dass die externe Webseite für den Client beim User als eine auf deinem Server laufende erscheint. Auch wenn ich in letzter Zeit fast zuviel Werbung dafür mache: node.js ist Dein Freund.

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Externes Forum auf HTML Seite einbinden?

Externes Forum auf HTML Seite einbinden?

HTML-Dokument einbinden mit Perl

Flshpaper in HTML-Dokument einbinden

externes Html einbinden

Stichworte

E-Mail:

Abonnieren Abbestellen