Tutorial Seiteneinbindung JavaScript

Vielen Dank für dieses JavaScript an Webbausteine.de

Hier das JavaScript, das Ihr in die HTML des Layouts einfügt. Dies ist als Alternative zu einem Iframe gedacht, das nicht auf mobilen Geräten wie dem iPhone funktioniert. Der Aufruf kann nur innerhalb der eigenen Domain verwendet werden. Lest dazu bitte über Same-Origin-Policy.

> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” >  “Zwischen Head Tags” einfügen

Achtet dabei auf die korrekte relative Pfadangabe zu der Seite die Ihr einbinden wollt. Als ID zur Ausgabe habe ich hier die id=”ausgabe” definiert.

<script>
var ajax = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");

function init() {
 ajax.open("GET", "./Demo/demo.html", true); // Hier relativen Pfad zur eingebunden Seite eintragen
 ajax.send(null);
 ajax.onreadystatechange = function() {
  if (ajax.readyState == 4 &&
      ajax.status == 200) {
   document.getElementById("ausgabe").innerHTML = ajax.responseText;
  }
 }
}

window.addEventListener("load", init);
</script>

Hier meine CSS zur Ausgabe der aufgerufenen Seite, wobei diese Class die oben definierte ID “ausgabe” trägt. Den horizontalen Scrollbalken habe ich unterdrückt, da die aufgerufene Seite exakt die gleiche Layoutbreite haben muss wie die aufrufende Seite, ich hier aber nur den Inhalt in der Breite des aufgezogenen Textfeldes anzeigen lassen wollte. Die Höhe habe ich mit 200px angegeben. Kopiert das ebenfalls “Zwischen Head Tags”.

<style>
  div#ausgabe {
    height: 200px;
    overflow-x: hidden;
    border: solid 1px #888888;
  }
</style>

Zieht Euch ein Textfeld in der Breite auf, die der scrollbare Textfeld-Bereich erhalten soll und ändert die ID vom Textfeld in die oben definierte ID “ausgabe

Textfeld ID

Viel Erfolg!

Tutorials von Thomas Frei-Herrmann

diese Seite weiter empfehlen


Counter Statistik