# externes html dokument mit JS einbinden



## Eli- (29. Mai 2011)

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. Mai 2011)

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=site:tutorials.de+ajax+iframe&aq=f

mfg chmee


----------



## ComFreek (29. Mai 2011)

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. Mai 2011)

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


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:

```
<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. Mai 2011)

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/eigene-tutorials/webentwicklung/ajax-tutorial/

mfg chmee


----------



## Eli- (29. Mai 2011)

hi
ist das dann das hier:
http://www.admin-wissen.de/eigene-tutorials/webentwicklung/ajax-tutorial/einfuehrung-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

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

```
<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. Mai 2011)

oh geht doch nicht ;( die datei liegt hier:
http://www.demonwars.de/app/download/5194548163/test.txt?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. Mai 2011)

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. Mai 2011)

ich kann leider kein php benutzen


----------



## CPoly (29. Mai 2011)

Lass uns doch nochmal darauf eingehen.



Eli- hat gesagt.:


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



chmee hat gesagt.:


> 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. Mai 2011)

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. Mai 2011)

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


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


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


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


----------



## Eli- (29. Mai 2011)

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


----------



## chmee (29. Mai 2011)

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

mfg chmee


----------



## Navy (30. Mai 2011)

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.


----------



## Eli- (30. Mai 2011)

hi danke aber das geht leider nicht^^


----------



## CPoly (30. Mai 2011)

Eli- hat gesagt.:


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


 
Dann hast du evtl. etwas falsch gemacht. Hier nochmal vollständiger Beispielcode.

index.html

```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	
	<title>External file</title>
</head>

<body>
	<div id="placeholder"></div>
	
	<script type="text/javascript">
	/* <![CDATA[ */
	function injectHTML(content) {
		document.getElementById('placeholder').innerHTML = content;
	}
	/* ]]> */
	</script>
	<script type="text/javascript" src="extern.txt"></script>
</body>

</html>
```

extern.txt

```
injectHTML('<strong>TEST</strong>');
```


----------



## ComFreek (30. Mai 2011)

@CPoly: Wobei ich ja dann der externen Datei auch die Endung *.js verpassen würde.


----------

