Responsive iFrame

th_wolfgang · 08. Aug. 2015

Hallo,

ich spiele seit Stunden mit dem einstellen eines Responsen iFrame rum… habe bei Dr. Google zwar viel gefunden funktioniert aber nicht richtig.

Ich möchte das Content einer zweiten Webseite einbauen… die Höhe wird nicht richtig angezeigt. Wenn dies z.B. an meinem Desktop Rechner angepasst ist, wird auf einem Tablet oder Smartphone am unteren iFramerand abgeschnitten oder ich habe zu viel weißen Platz. Bei einigen Scripts die ich gefunden habe wird auch ab und an nur der obige Teil des einzubindenden Content gezeigt.

Kennt nicht jemand ein Javascript, welches iFrames automatisch erkennt und anpasst?

Habe bereits 30 Scripts getestet… die meisten zeigen nur 3cm des obigen Bereiches an.. Auf meiner Startseite laufen zwei iFrame einer der slider wird richtig angezeigt… und weiter unten der dieser halt nicht Funktioniert...

http://www.jqueryscript.net/layout/jQuery-Plugin-For-Auto-Resizing-iFrame-iframe-Auto-Height.html
http://www.jqueryscript.net/other/Responsive-IFrames-Plugin.html
http://www.jqueryscript.net/layout/Auto-Resizing-iFrame-with-jQuery-rIframe-Plugin.html
https://gist.github.com/aarongustafson/1313517

Danke & LG
Wolf

th_wolfgang · 09. Aug. 2015

…hat denn keiner eine Idee, ich stehe leider etwas unter Zeitdruck.
Danke & LG
Wolf

CodeB · 09. Aug. 2015

Hi,

alternativer Vorschlag. Parse den Content mit PHP und gib ihn bei dir aus, wenn du das möchtest, aber aus SEO-Sicht hast du dann duplicate Content.

VG
CodeB

th_wolfgang · 09. Aug. 2015

Hallo,

danke
sorry aber hast du evtl. ein Beispiel "Parse den Content mit PHP" das habe ich noch nie "in der Hand gehabt"...

der Content hat 1000 Unterseiten ist ein Shopsystem welches in eine HtmL5 template gebastelt wurde...

Danke & LG
Wolf

xorg1990 · 09. Aug. 2015

…hat denn keiner eine Idee, ich stehe leider etwas unter Zeitdruck.

Ein bisschen zeit musst du uns schon geben, am WE haben die meisten andere Sachen zu tun.

CodeB's Vorschlag wäre wohl das vernünftigste, allerdings arbeite ich seit 4 Jahren nicht mehr mit php aber ich weiß was er meint.

CodeB schrieb:
aber aus SEO-Sicht hast du dann duplicate Content.

Das ließe sich umgehen wenn man den Contetnt über Ajax nachläd. Bzw. via Jquery load()

Code:

<!DOCTYPE html>

<head>
    <title>Profile</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script>
         $(document).ready(function(){
            $('#toAppend').load("http://www.google.de/ .content");
            
 
         });
        
        
    </script>
</head>

<body style="background: rgb(51, 51, 51);">
        
<div id="toAppend"></div>
    
    
</body>
</html>

Geht natürlich nicht da google kein Access-Control-Allow-Origin erlaubt hat, dass müsste Wolfgang dann Server seitig regeln.

Hm Wolf.., Wolfgang... ich habe vor geraumer zeit auch 2 Wolfgangs mit Javascript konfrontiert und die meinten so schleicht ist die Sprache gar nicht.
Du bist nicht zufällig einer der 2 Personen hier:
DL4YHF's Ham Radio and Homebrew Homepage
oder
Amateurfunk in Greiz

Wen ja, dann kennen wir uns :grin:

Ja, Nein Antwort reicht.

th_wolfgang · 09. Aug. 2015

Hallo Xorg,

Vielen Dank für die Ausführung! Werde es gleich mal versuchen.
Leider bin ich keiner von den zwei Wolfgangs de du hier benannt hast.

Wünsche Dir noch ein schönes Wochenende
LG Wolf

- - - Aktualisiert - - -

Hallo,

es funktioniert "teilweise"!

nach dem Eintrag (htaccess)
Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

kam dann die Seite an. Leider nicht in der Form wie erwartet. Das Content etc. ist komplett zerwürfelt. Alles ist überlappend an die linke Monitorseite gepackt wurden. Bilder sind weg, Schriften anders und ich habe keine Ahnung ob Cookies und uniqueIDs funktionieren. Brauche meine Designeinstellungen... des Shops hoffe das geht irgendwie…? Wie kann ich alle CSS in das Script packen die in der Seite geladen werden? Was mache ich den Falsch? Dachte die Seite wird 1 zu 1 eingebunden... ist ja eigentlich logisch, die Seite mit einer DI einzubinden... beissen sich da evtl die unterschiedlichen CSS oder html Versionen?

Danke & LG
Wolf

xorg1990 · 09. Aug. 2015

th_wolfgang schrieb:
Leider bin ich keiner von den zwei Wolfgangs de du hier benannt hast.

Tja schade eigentlich. Beide sind absolute DSP Nerds und könnten das Forum echt bereichern.

0th_wolfgang schrieb:
es funktioniert "teilweise"! nach dem Eintrag (htaccess)

An htaccess habe und hatte ich nicht gedacht(schon ewig her das ich mal was mit Apache gemacht habe)

Ich habe mal was ausgearbeitet für dich:
iframe
Geht auch mit css + Bildern.

Ich erklär:
Ich habe auf den Webspace 2 Dateien. die iframe2.html und die header.php.
in der iframe2.html steht das:

Code:

<!DOCTYPE html>
<head>
    <title>iframe</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script>
         $(document).ready(function(){
            $('#toAppend').load("http://dm4tr.bplaced.net/iframe/header.php #content");
            
 
         });
        
        
    </script>
</head>

<body style="background: rgb(51, 51, 51);">
        
<div id="toAppend"></div>
    
    
</body>
</html>

via $('#toAppend'). wällst Du aus wo auf deiner Seite der Inhalt nachgeladen werden soll.
.load(); erwartet zum einen die url http://dm4tr.bplaced.net/iframe/header.php, kann auch /header.php lauten. #content ist das div was nachgeladen werden soll sprich das div mit der id content. Alles andere wird nicht angezeigt.

die header.php schaut so aus.

Code:

<?php
 header("Access-Control-Allow-Origin: *");
?>
<!DOCTYPE html>
<head>
    <title>Iframe</title>
</head>
<body>
    <div id=content><h1 style="color: red;">Dieser inhalt wurde nachgeladen! </h1>
    <img src=105.JPG >
    </div>
</body>
</html>

Wie das SEO technisch ausschaut weiß ich allerdings nicht.
CSS und bilder werden mit nachgeladen. Es spielt keine rolle wie du das CSS eingebunden hast, es geht/sollte gehen.
Cookies sind ein Server seitiges ding. Du hättest sowieso Probleme bekommen mit deinem Iframe verfahren wenn die Domains nicht gleich sind.

cookies
Häufiger Fehler: wenn man keine echte Domain hat und sich einer Weiterleitung bedient, dann kann es zu Problemen kommen. Es gibt ja Möglichkeiten zum Beispiel mit einer Frame Weiterleitung eine Domain oben in der Adresszeile zu lassen, die ja eigentlich nicht die wirkliche Adresse ist. United-Domains und andere Provider hatten in der Vergangenheit alle diese Möglichkeit für ihre Kunden. Setzt man nun ein Cookie kann es zu problemen kommen, weil das Cookie praktisch fuer eine fremde Domain gesetzt wird und man darf als Skript ja nur die Cookies auslesen, die für die eigene Domain sind - dies gibt Konflikte und dann funktionieren die Cookies nicht so wie man es von Ihnen erwartet, was aber auch logisch ist. Ihr Skript denkt es liegt auf "web1.server1.de" und oben in der Adresszeile steht für den Surfer dank Frame Weiterleitung "www.abc.de", worauf dann auch die Cookies gespeichert werden. Alleine die Standardeinstellung vom Internetexplorer steht schon hoch genug, um das Auslesen dieser Cookies dann zu verhindern.

th_wolfgang · 09. Aug. 2015

Hallo Xorg,

Vielen Dank, das du dir mit meinem Problem so viel Arbeit machst und auch noch deinen Sonntag opferst.
Ich werde gleich mal anfangen dies einzubauen. Hoffe ich „verbastel“ mich nicht.

Ach so, ja das mit den Cookies… da war ich mir auch unsicher, aber es ist nur eine Domain alles liegt auf dem gleichen Host und URL.

LG Wolf

NACHTRAG: Leider wird das nicht funktionieren... in der Shop Seite sind mehrere CSS die der alle braucht um das der Shop dargestellt werden kann. Besteht keine Moeglichkeit die komplette seite einzusetzen?

Daher hatte ich das Problem, das sich alles verschoben hat Texte, Bilder waren weg..., Schriften weg etc.

Das Shopsystem ist von einer alten DataBecker Shop2Date 8.0 (Firma gibt es nicht mehr). Der shop ist eigentlich gut aber die Designs halt nicht mehr zeitgemäß... So habe ich da ein Shopsystem und alles raus bis auf den Warenkorb mit Produkten, das alles kommt in die Template rein "für den Zeitgemäßen Tatsch".
Wenn ich hier "nur" z.B. die #Content aus einer CSS Laden kann wird das nicht funktionieren. Habe ich das so richtig verstanden, dass dies der Fall ist.

...der Head der Seite schaut so aus (weiter Dateien werden aus z.B. shoptl.php etc und noch vielen anderen geladen und befinden ich im Hauptverzeichnis und assets - Ordner:

Header:

Code:

<?php
//<21.10.2008/6.0.3.2/>

define('UID', '00000000000000001');
define('FILENAME', 'index.php');
define('ROOT', './');
define('ASSETS', ROOT.'assets/');
define('BASEASSETS', ROOT.'assets/');
define('SHOPSCRIPT', ASSETS.'s2di.php');
define('DBPATH', './assets/shopdata/');
define('DOCS', './assets/docdata/');
require(SHOPSCRIPT);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//de" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=1140, user-scalable=no" />
<title>M-M</title>
<meta http-equiv="content-language" content="de" />
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="expires" content="0" />
<meta name="author" content="" />
<meta name="description" content="" />
<meta name="keywords" lang="de" content="" />
<meta name="generator" content="web to date 8.0" />
<link rel="stylesheet" type="text/css" href="./assets/sf.css" />
<link rel="stylesheet" type="text/css" href="./assets/sd.css" />
<link rel="stylesheet" type="text/css" href="./assets/sc.css" />
<link rel="stylesheet" type="text/css" href="./assets/ssb.css" />
<link rel="stylesheet" type="text/css" href="./assets/scal.css" />

<link rel="shortcut icon" href="#" />
<script type="text/javascript">
///<![CDATA[
var SERVICESCRIPT = '<?php echo CC_URL_SERVICE ?>';
///]]>
</script>
<script src="<?php echo CC_TPL_JSPUT ?>" type="text/javascript"></script>


<cond="&site.ftsajax and &site.properties.design.ftsajax">

xorg1990 · 09. Aug. 2015

th_wolfgang schrieb:
Vielen Dank, das du dir mit meinem Problem so viel Arbeit machst und auch noch deinen Sonntag opferst.

nicht zu danken ich helfe gerne andren läuten...das liegt so in meiner Genetik

th_wolfgang schrieb:
...der Head der Seite schaut so aus

Das ist der Seite die du einbinden möchtest?
wenn ja dann musst du das noch zu beginn der Seite einbauen:

Code:

<?php
 header("Access-Control-Allow-Origin: *");
?>

Das htaccess Gedöns braucht man meines wissen nicht.

th_wolfgang schrieb:
Wenn ich hier "nur" z.B. die #Content aus einer CSS Laden kann wird das nicht funktionieren. Habe ich das so richtig verstanden, dass dies der Fall ist.

Ja fast, man lädt nicht nur das div mit der id content von der Seite. load() lädt ja praktisch das komplette html File, mit allen drum und dran auch Header, und sortiert dann nur das div mit der id content aus.

Ich hatte mich allerdings vertan die CSS Files musst man natürlich mit einbinden auf der Seite wo halt der Inhalt angezeigt werden soll.
Also was in meinem bsp die iframe2.html muss noch das rein:

Code:

<link rel="stylesheet" type="text/css" href="./assets/sf.css" />
<link rel="stylesheet" type="text/css" href="./assets/sd.css" />
<link rel="stylesheet" type="text/css" href="./assets/sc.css" />
<link rel="stylesheet" type="text/css" href="./assets/ssb.css" />
<link rel="stylesheet" type="text/css" href="./assets/scal.css" />

Mir fällt aber während des Schreibens was ein. Ich weiß nicht ob dein Shop noch funktionieren wird. Wenn load() einmal Fertig ist gibt es keine Verbindung mehr zu den eigentlichen .php File.
Vielleicht ist geht es wen man einfach mit include arbeitet. Beispiel 3 anschauen.
Falls du es noch nicht Gelsen hast, ich meinte Beispiel 3 nicht 2.

kkapsner macht gerade die runde, ich ruf ihn mal herbei kkkkkkaaaaaaappppsssnneeerrr. :d

th_wolfgang · 09. Aug. 2015

Hallo Xorg,

super noch einmal besten Dank, vom bastelnden Wolf... man kann ihn auch als "der mit dem wolf tanzt betitteln..."

Wenn ich dich gerade zitieren darf:

Mir fällt aber während des Schreibens was ein. Ich weiß nicht ob dein Shop noch funktionieren wird. Wenn load() einmal Fertig ist gibt es keine Verbindung mehr zu den eigentlichen .php File.

Dann ist meine große Hoffnung ... Das wird nicht funktionieren, der Shop fragt bei jedem Klick z.B. auf ein Produkt generierte Unique-ID's ab. Wenn die nicht permanent gesendet werden und abgeglichen, kann man den Warenkorb nicht nutzen, also den Shop.

...die CSS Files musst man natürlich mit einbinden auf der Seite wo halt der Inhalt angezeigt werden soll

Das wird evtl. ein Problem! Ich wollte anfangs beide Shops "verheiraten und ineinander basteln. Hatte da aber so meine Probleme, nicht nur wegen der Anpassung der einzelnen CSS die "Kilometer lang sind" und sich in die "Wolle bekamen" sondern auch an anderen stellen. Wenn ich die CSS jetzt einbinde, wird das Problem wieder lebendig werden. Leider muss ich bis morgen Früh fertig sein... Nachbessern darf ich schon noch aber der Grundstein sollte stehen... So werde ich es nicht schaffen die CSS zu bearbeiten und hatte da am Anfang mit einem iFrame spekuliert.

PS: Include scheint "nur" als Link im Header zu stehen ist das so richtig. Das ist alles etwas Neuland... Meine Seite baut aber erst Menu Slider etc. und dann sollte der shop kommen... Hoffe ich verstehe das wiederum nicht falsch.

LG & Danke
Wolf

kkapsner · 09. Aug. 2015

Wenn sich die CSS der verschiedenen Seiten nicht vertragen, kannst du die serverseitige include-Methode und clientseite load-Methode sowieso vergessen. Denn du hast in beiden Fällen einfach nur eine große Seite mit globalem CSS (scoped Styles sind ja leider noch bei extrem wenig Browsern erst angekommen).

Also musst du etweder mit iframes arbeiten oder die CSS umschreiben...

... aber (ich glaube ich wiederhole mich hier) meiner Meinung ist es nicht sinnvoll dein System umzuschreiben. Das ganze wird weniger Zeit in Anspruch nehmen (d.h. billiger sein), wenn du alles neu aufbaust - komplett ohne irgendwelche Altlasten.

th_wolfgang · 09. Aug. 2015

Hallo,

das schaffe ich leider nicht bis morgen Früh, bei mir ist es schon 22.00 Uhr schade, das Prinzip hätte mir gefallen und mich gefreut was dazuzulernen zu können verstanden habe ich das schon.

Wie kann ich es denn zum laufen bringen das es mal funktioniert (mein Frühtermin) und ich dann später in Ruhe nacharbeiten kann. Mit iFrame hatte ich bis her kein Glück, die Höhe konnte ich nicht anpassen hatte bereits ca. 30 Skripte und CSS Regeln versucht immer wieder stimmte es nicht das Problem ist hierbei Responsives Design und der liebe iFrame.

Wie gesagt ich mag keinen iFrame das hier würde mir um Lichtjahre besser gefallen. Aber wenn mir dann nichts anderes übrig bleibt.

wenn du alles neu aufbaust - komplett ohne irgendwelche Altlasten.

Das werde ich auch tun lediglich muss ich erst was vorweisen um dann in Ruhe Zeit dafür zu haben.

(PS:wenn das mit Paser funktioniert hätte... ich wäre im Dreieck gesprungen vor Freude!

) Hat dann evtl. jemand eine gute iFrame Loesung, bitte die wirklich funktioniert... oder evtl. noch eine andere Idee?

Danke & LG
Wolf

xorg1990 · 09. Aug. 2015

th_wolfgang schrieb:
Wenn ich die CSS jetzt einbinde, wird das Problem wieder lebendig werden.

Also wen sich deine css files nicht vertragen, dann Zitat kkapsner:

kannst du die serverseitige include-Methode und clientseite load-Methode sowieso vergessen.

wenn wir so weiter machen wird das Ganze nur try and error.

Hör auf kkapsner, dass wird das beste sein.

Hoffe du versinkst jetzt nicht in einem "Plateu".

th_wolfgang · 09. Aug. 2015

Hallo Xorg,

danke in einem Plateu werde ich nicht verschwinden.

Werde auch alles neu machen und von vorn anfangen. Es hilft mir allerdings nichts bis morgen eine "vorübergehende Lösung "aus dem Hut zu ziehen" das Kaninchen halt. Sonst bekomme ich Ärger bzw. Terminprobleme...

Und einen schönen Sonntag Wünsche ich noch dazugelernt habe ich auf jeden Fall, jetzt weiß ich was ein Paser ist und wie der arbeitet. Muss mich dann wohl oder übel wieder auf die Tests mit iFrame machen…

LG Wolf

xorg1990 · 09. Aug. 2015

th_wolfgang schrieb:
dazugelernt habe ich auf jeden Fall

Siehste, ich lasse auch die Testseite ein Weilchen on. Gibt auch noch andre die das nachvollziehen wollen.

Ps: der Bergriff Plateu kommt eigentlich aus dem bereich des Bodybuilding Sportes. Man tut und mach aber es geht nicht vorwärts. Praktisch das körperliche Burnout.
Portiert auf das Wesen eines Programmierers könnte man den Begriff auch so verstehen: Man programmiert und programmiert, aber nix funktioniert, bis man alles verwirft. :fox:

an die Admins ich erhalte in letzter Zeit immer folgen Meldung:

Die folgenden Fehler traten bei der Verarbeitung auf
Dieser Beitrag ist ein Duplikat eines Beitrags, den Sie innerhalb der letzten fünf Minuten erstellt haben.

Irgendwie werde ich immer wider zur ?do=updatepost umgeleitet und es wird 2 mal gespeichert

th_wolfgang · 09. Aug. 2015

Hallo Xorg,

das kannte ich nicht... ich treibe kein Bodybuilding, dachte an eine "hochgelegene Fläche"... Sport mache ich eigentlich wenig, bei uns ist es zu warm, ab und an springe ich mal ins Wasser, das wars dann schon... Verwerfen tu ich eigentlich nicht gern etwas wenn ich dran bin mach ich so lange bis...! Allerdings gab es mal Familiäre Problemen da hat mich der Rechner gar nicht mehr interessiert konnte mich damals nicht konzentrieren, so kann ich das nachvollziehen was mit "Plateu" gemeint ist. Aber wie gesagt da kam der Frust durch Familienangelegenheiten und nicht durchs basteln am Rechner.

LG & Danke Wolf

mikdoe · 09. Aug. 2015

xorg1990 schrieb:
ich lasse auch die Testseite ein Weilchen on

Geiles Bild. Bist du einer von den beiden?

th_wolfgang · 09. Aug. 2015

Hallo Micha,

habe ich mich auch schon gefragt...

LG Wolf

xorg1990 · 09. Aug. 2015

th_wolfgang schrieb:
das kannte ich nicht... ich treibe kein Bodybuilding

Das dachte ich mir... . Das mit dem BB hat bei mir vor Jahren schon angefangen weil ich auf arbeit immer als "derer Hund" oder "Pommeskreuz" bezeichnet wurde

War ach nie besonders breit bei einer Körpergröße von 1,80 wog ich lange Zeit 72 kg. Musste aber auch wegen Magenproblemen und Haut Problemen eine Pause einlegen

Für 2 Jahre!! Vor 12 Wochen hab ich erst wider angefangen.

PS: Bodybuilder kann man auch mit 80kg sein, wer sich dementsprechend ernährt und joggen oder schwimmen geht ist auch BB!

mikdeo schrieb:
Geiles Bild. Bist du einer von den beiden?

Neee meine Oberarme sind dicker

Das Foto ist von Kroatien, Kroatien ist mein 2te heimat, habe Kumpels dort.
Das Foto ist irgendwo da entstanden: 43.489230, 16.372430. Die Personen kenn ich nicht.

Micha

Micha???

th_wolfgang · 09. Aug. 2015

Hallo Xorg,

ich lebe seit paar Jahren in Thailand... da hat man kein Bock auf viel Sport... zu warm ich hau mich ab und an in den Pool aber nicht jeden Tag. Kroatien habe ich auch Freunde und war da ab und zu... meist übers Wochenende, alles war zerbombt aber die Fette Villa von dem Vater meines Geschäftspartners hatten die übersehen... die kleinen ziele drumherum waren aber alle ...naja Ist allerdings schon fast 16 Jahre her dass ich das letzte mal da war… seit 15 lebe ich in TH… und bin auch erst 40...

LG & Danke
Wolf

Responsive iFrame

New member

New member

CodeB

Guest

New member

New member

New member

New member

New member

New member

New member

Super Moderator

New member

New member

New member

New member

New member

Moderator

New member

New member

New member