[Erledigt] Nur einen Teil einer Website per Iframe einbinden

Hallo zusammen,

ich möchte gerne nur einen Teil der Website A, namentlich den Bereich Festnews, (Erstellt mit ProWeb / Eigene Site) in die Website B per Iframe einbinden. Bis jetzt schaffe ich es leider nur immer den ganzen Teil einzubinden. Hat hier jemand einen Tipp?? Geht so etwas überhaupt??

Herzlichen Dank. Gruss Claudio

Hallo Claudio,

vielleicht hift das ja weiter ungetestet!

Html Absatz an gewünschter Stelle anlegen, dort das Frame rein natürlich anpassen:

1

<iframe style="border:1px #ffffff none;" name="Dein-Frame-Name" scrolling="auto" frameborder="0px" width="100%" height="300px" marginheight="10px" marginwidth="10px" src="http://www.DeineURL/DeinOrdner/Deine-HTML-Datei.html"></iframe>

Und die benötigte Html Datei anlegen fertig:
http://www.DeineURL/DeinOrdner/Deine-HTML-Datei.html

Grüße Bernd-Z

Wenn es HTML5-kompatibel und W3C-konform sein soll, verwende dies:

<iframe src="http://www.domain.xy/verzeichnis/datei.html" style="border: none; margin: 10px; overflow: hidden; width: 100%; height: 300px;"></iframe>

Die Zahlenwerte paßt Du einfach wunschgemäß an.

Hallo Volker,

das ist besser danke war auf die schnelle wo raus kopiert muss mir angewöhnen saubere Tipps zu veröffentlichen.

Grüße Bernd-Z

Hallo Bernd, hallo Volker,

danke für die Hilfestellung. Irgendwo stehe ich noch auf dem Schlauch......

Im Projekt A habe ich nun eine html angelegt wo genau die Info drin sind welche ich in Projekt B haben möchte. Diese Seite per Iframe ins Projekt B eingebunden. Soweit so gut. In der Website sehe ich aber noch immer alles (Layout, Navigation u.s.w) anstatt nur den Inhalt des erzeugten html.

Gruss Claudio

Hallo Claudio,

wenn ich das richtig verstanden habe dann soll ja auch bloß
ein kleiner Teil davon ausgegeben werden.
Somit würde dann vielleicht nur das folgende in die separate Html gehören.

<div class="paragraph"><h3><a href="2014/w7dec08151e1f002ed04eed789853788" title="Niklausschwingen">Niklausschwingen</a></h3>
<div class="teaserblock">
<p style="font-family:Times New Roman;font-size:16px;text-align:justify"><span style="font-family:Verdana,Geneva,sans-serif;font-size:14px">Der Sieger des 77. Niklausschwingets heisst Stefan Kenel. Er bezwingt Andreas Fässler in der neunten Minute mit einer Kurz</span><span style="font-family:Verdana,Geneva,sans-serif;font-size:14px"> </span><span style="font-family:Verdana,Geneva,sans-serif;font-size:14px">/</span><span style="font-family:Verdana,Geneva,sans-serif;font-size:14px"> </span><span style="font-family:Verdana,Geneva,sans-serif;font-size:14px">Fussstich Kombination</span><span style="font-family:Verdana,Geneva,sans-serif;font-size:14px">.</span><span style="font-family:Verdana,Geneva,sans-serif;font-size:14px">..</span></p>
</div>
<h3><a href="2014/w7deb071721090030845440158658ebf" title="Plantahofschwingen">Plantahofschwingen</a></h3>
<div class="teaserblock">
<p style="font-family:Times New Roman;font-size:16px;text-align:justify"><span style="font-family:Verdana,Geneva,sans-serif;font-size:14px">Der Saisonabschluss der Nachwuchsschwinger fand am letzten Samstag mit dem traditionellen Plantahofschwinget statt.</span><span style="font-family:Verdana,Geneva,sans-serif;font-size:14px"> </span><span style="font-family:Verdana,Geneva,sans-serif;font-size:14px">Der seit Jahren vom</span><span style="font-family:Verdana,Geneva,sans-serif;font-size:14px"> Schwingclub</span><span style="font-family:Verdana,Geneva,sans-serif;font-size:14px">...</span></p>
</div>
<h3><a href="2014/kilchberger.html" title="Kilchberger">Kilchberger</a></h3>
<div class="teaserblock">
<p style="text-align:justify">Beim Kilchberger 2014 standen sich die beiden Eidgenossen Matthias Sempach und Philipp Laimbacher gegenüber. Der Schwingerkönig nutzte...</p>
</div>
</div>

Grüße Bernd-Z
PS: Das CSS bei unterschiedlichen Templates nicht vergessen.

Hallo Bernd,

inhaltlich würde deine Angabe voll in schwarze treffen. Die eigentliche Herausforderung liegt darin dass ein Aufmacher in dem neuen html liegt (Aktuelle News / Seite A). Bei diesem Vorgehen müsste ich jedes Mal das hmtl anpassen was ich wegen dem Aufwand nicht möchte. Eventuell hat noch jemand eine Idee.

Gruss Claudio

Zu Deinem Anliegen gibt es keinerlei Idee. Die Einbindung einer externen Website ist nur in ihrer Gesamtheit möglich.

Entweder reduzierst Du die einzubindende Seite auf die gewünschten Elemente, oder Du legst eine Kopie davon an, reduzierst diese und bindest diese dann via I-Frame ein.

Hallo Bernd, hallo Volker,

herzlichen Dank für Eure Ideen und die Hilfsbereitschaft. Hab das Thema vorerst in die Schublade gelegt. Ich wünsche allen einen guten Start ins kommende 2015!!

Gruss Claudio

Das ist ganz einfach zu realisieren. Das System bietet eine plain-Version mit diesem Linkzusatz an: ?nglayout=plain

Die plain-Version der Website die Du einbinden willst kannst Du also so aufrufen: http://www.hosalupf.ch/?nglayout=plain

Jetzt musst Du nur dafür sorgen dass auf der Seite von der Du eine Einbindung vornehmen willst im Content nur das steht was Du brauchst. Notfalls auch einfach eine in der Navigation nicht verlinkte Seite anlegen in der nur die News noch mal im Aufmacher sehen und dann die URL verwenden.

Die Plain-Version kannst Du jetzt mit dem von Volker vorgeschlagenen Code einbinden.

Eine weitere Möglichkeit besteht darin, die fremde Website nur als Link anzubieten der einen Iframe öffnet in dem dann die News stehen. Das halte ich eigentlich für die eleganteste Lösung weil das Fenster auch nur bei Interesse geöffnet zu werden braucht und nicht das Layout der Seite verändert. Das sähe dann so aus:

<a href="http://www.hosalupf.ch/?nglayout=plain" title="Schwingernews" class="galleryiframe">Linktitel für den News-Iframe</a>

Hallo Regine,

einen sehr spannenden Ansatz den du da präsentierst. ?nglayout=plain kannte ich bis jetzt gar nicht, ist aber überzeugend. Habe auch gleich beide Ansätze eingebaut und verglichen. Da ich mit den Code überhaupt nicht auskenne noch eine Frage: Kann in dem Code von Volker der Link übersteuert werden??

Da die Seite welche mit ?nglayout=plain eingebunden wird ein Aufmacher ist sind die Titel automatisch Links auf die andere Website. Diese möchte ich noch unterbinden.

Gruss Claudio

Hmm die Links brauchst Du aber die sollten sich in einem neuen Fenster öffnen. Jetzt müssen wir testen.

In der Original-Seite auf der die Aufmacher stehen erzeugst Du oberhalb des Aufmachers einen PHP-Absatz mit folgendem Inhalt:

<?php
ob_start();
?>

Unterhalb des Aufmachers kommt dann folgender Code in einen PHP-Absatz:

<?php
$content=ob_get_clean(); 
$content=str_replace("<a href=\"","<a target=\"_blank\" href=\"",$content);
echo $content;
?>

 Probier mal aus, ob das klappt!

Deinen Vorschlag habe ich eingebaut. Ich sehe noch keinen Unterschied. Original Seite und die Website in welche die Varianten eingebaut sind.

Ich habe gedacht die Links brauche ich nicht sondern setzte am Schluss einen globalen Link für die gesamte Seite.

Gruss Claudio

Hallo Claudio,

für heute streike ich und sobald ich wieder nüchtern bin, überlege ich weiter

Allen einen schönen Abend und einen guten Rutsch!

Hallo Regine,

das ist dein gutes Recht ja sogar Pflicht  Das 2015 wird spannend und es braucht neuen Elan und Ideen....

Happy New Year!!

Gruss Claudio

...nur weil wir jetzt ein paar Tage ein bisschen "relaxt" haben....?   

Das halte ich für ein "Gerücht"...  

...denn frei nach dem Motto "...wo ein Wille ist, ist auch ein Weg..." kann man da schon auf Ideen kommen, die dies möglich machen...

<off topic @Murli 10>

Obwohl ich persönlich natürlich meinem Kollegen Christian Stucki in dieser Sportart die Daumen drücke, möchte ich meine Ideen zu Deiner Problematik gerne ins Bündnerland weiter geben...  

</off topic>

Eine Realisierung ist sicher nicht so eine ganz grosse Hexerei, da es sich hier ja nicht wirklich um eine "Drittseite" handelt, sondern dass hier ja sowohl die "Mutterseite" wie auch die "iFrame-Seite" in der Gewalt (und somit in der Beeinflussung) des gleichen Webmasters liegen.

Ich habe mal die Möglichkeit nachgestellt und mal eine "Mutterseite" angelegt >hier< und dann daraus zuerst einmal den Aufmacher als iFrame separat dargestellt und dann auch noch aufgezeigt habe, wie ein einzelner Absatz oder auch mehrere Absätze aus einer Seite "extrahiert" und in die neue Seite per iFrame wieder eingebunden werden können...

...siehe Beispiel >hier<

Dabei habe ich einfach mittels PHP einen 3-Zeiler geschrieben, der mir den entsprechenden Absatz (oder eben auch mehrere) aus der Mutterseite ausliest und den ich mittels iFrame in der neuen Seite dann einbinde...

...aber dazu musste ich dem Design der Mutterseite in den Absätzen auch zuerst "eineindeutige" Bezeichnungen zuordnen, was im Original natürlich nicht vorhanden ist.

Zudem besteht auch hier das bereits angesprochene Problem der Verlinkung der Aufmacherabsätze, das noch gelöst werden müsste...  (aber da bin ich zuversichtlich, dass sich dies auch das lösten lässt)...

...und auch bei der Problematik mit Bildern, die ja in W2D bzw. Siquando nicht mit einem absoluten, sondern nur mit einem relativen Pfad eingebunden sind, ist hier sicher noch Handlungsbedarf, der mir jedoch ebenfalls lösbar erscheint...

Aber man könnte sich u.a. z.B. ja auch überlegen, die "Originalseite" mittels iFrame einzubinden und von dieser dann mittels CSS nur den gewünschten Ausschnitt anzeigen zu lassen...

Beispiel >hier<

(...die Verlinkungsproblematik ist natürlich auch hier nach wie vor die selbe...)

Meine Beispiele sind nur schnell per "quick & dirty" gemacht und müssten natürlich noch entsprechend formatiert werden, etc. etc.

Auch die Problematik der Verlinkungen im Aufmacher sind in meinem Beispiel nicht gelöst...

...es soll ja auch keine "pfannenfertige Lösung" darstellen, sondern nur Ideen und Wege zur Problemlösung aufzeigen..

Meine Beispiele sind jedoch auch mit der "alten Version", also "nur" mit W2D bzw. Siquando Web gemacht und die "nächste Generation" bzw. die "PRO Version" habe ich nicht und will sie auch keinesfalls....!

Deswegen kann ich Dir auch kein "PRO-Beispiel" geben, aber eigentlich müsste ja alles was mit der "alten" W2D ging mit der "PRO-Version" problemlos machbar sein, weil sonst hätte ich den proklamierten Fortschritt nicht verstanden...  

Somit hoffe ich, dass ich vielleicht doch die eine oder andere Überlegung zu diesem Problem beisteuern konnte und wünsche Dir ein "tolles 2015"...!

<a href="http://www.hosalupf.ch/?nglayout=plain" title="Schwingernews" class="galleryiframe">Linktitel für den News-Iframe</a>

So - guten Morgen,

nachdem ich das mal kurz getestet habe denke ich, Du solltest auf diese obige Lösung ausweichen. Die Links lassen sich leider nicht unaufwändig aus dem HTML-Dokument strippen daher muss eine Lösung her, bei der sich - aber im neuen Fenster eben - die neue Seite auch öffnen darf und bei dieser Lösung hast Du mit Bordeigenen Mitteln mehrere Fliegen mit einer Klappe geschlagen.

Falls das Fenster zu klein ist macht es Sinn, einfach im Text auf die News der Seite zu linken so dass sich ganz normal ein neues Browserfenster öffnet. Ich setze diese Lösung bei mir in Rutenmühle mehrfach ein und finde eigentlich ganz angenehm. Du kannst Dir das ganz unten auf der Startseite mit Klick auf den Link Newsarchiv 2006 - 2014 bei http://rutenmuehle.com mal anschauen. Da die sich im Fenster öffnende Seite die alten Web to Date News sind (ich habe die Website ja erstellt bevor es den Konverter gab) habe ich allerdings das Design der Site so umgeschrieben dass alles ins Fenster passt was rein soll.

Ansonsten könntest Du direkt im Teasertemplate das Linkverhalten ändern aber das würde dann alle Teaserlinks betreffen, d.h. auf der Originalseite des Teasers würden dessen Teaserlinks auf die Artikel in neuen Seiten zeigen. Ich würde das wohl nicht machen aber gewichten musst Du das natürlich. In dem Fall öffnest Du auf dem Webserver /classes/plugins/ngpluginsteaser/ngpluginsteasercaption/tpl und tauscht diesen Code:

{foreach $items as $item}
<h3><a href="{$item->link->getUrl()|escape}" title="{$item->caption|escape}"{if $item->link->linkType == NGLink::LinkPicture} class="gallery"{/if}>{$item->caption}</a></h3>
{/foreach}

 Gegen diesen aus:

{foreach $items as $item}
<h3><a target="_blank" href="http://www.hosalupf.ch/{$item->link->getUrl()|escape}" title="{$item->caption|escape}"{if $item->link->linkType == NGLink::LinkPicture} class="gallery"{/if}>{$item->caption}</a></h3>
{/foreach}

 Das sollte es dann gewesen sein.

Ich überlege gerade weiter. Man sollte doch nglayout=plain in diese Abfrage in die ngpluginteasercaption.php einbauen können:

{if $nglayout == "plain"} 
   {
  $this->output = $template->fetchPluginTemplate ( 'ngpluginteaser/ngpluginteasercaption/tpl/template1.tpl' ); 
   }
else
   {
  $this->output = $template->fetchPluginTemplate ( 'ngpluginteaser/ngpluginteasercaption/tpl/template.tpl' ); 
   }
{/if}

und dann eine template1.tpl anlegen in der auf das nglayout=plain des Artikels gelinkt wird statt _self auf die komplette Site mit Layout..

Ich schaffe es aber heute nicht, mir das weiter anzuschauen, ich habe leider derzeit keine Testinstallation.

Unter Schwingerfreunden werden alle Ratschläge sportlich aufgenommen und mit einem freundlichen Händedruck verdankt

Hallo Walti,

nicht jeder weiss gleich viel und darum finde ich ein solches Forum so toll. Nun haben Regine und du mir mögliche Wege aufgezeigt und ich konnte einen davon problemlos umsetzen (Die Verlinkung ist zwar noch drin aber mit den von mir zusätzlich eingefügten Links werden diese zu "Blickfängern" und somit wohl von den meisten Usern auch so benutzt).

Zu deinem Hinweis dass die Beispiele "nur" mit der alten Version gemacht sind nur so viel: Hier im Forum gibt es viele Meinungen über das "neue" und "alte" System. Ich kann nur meine Meinung dazu sagen: Ich konnte ohne grössere Probleme Projekte übernehmen und mit einem Flex Layout nach meinen Wünschen gestalten. Eine davon ist zum Beispiel die Verbandsseite.

Der Lösungsansatz von Regine zeigt auch auf was im "neuen" System möglich ist. Mit dem Zusatz ?nglayout=plain lassen sich alle Seiten standartmässig ohne Layout anzeigen. Es braucht also keinen Code dazu. Hier ein Beispiel www.hosalupf.ch/content/news/sch.html?nglayout=plain (Ist nun so in meine Website eingebunden).

Auch ich wünsche Dir ein spannendes und gesundes 2015!!

Gruss Claudio

Hallo Regine,

ich habe nun deine Variante übernommen und so eingebaut. Zusätzlich habe ich noch manuelle Links eingefügt. So haben die Besucher die Möglichkeit direkt die Verbandsseite aufzurufen. Die Links der Aufmacher rücken damit in den Hintergrund. Die php Code habe ich wieder entfernt. Das Endergebiss gibt es hier

Nach dem ich das Thema bereits abgeschlossen hatte, ist trotzdem noch eine sehr schöne Lösung entstanden. Herzlichen Dank Regine und allen anderen Usern die dabei mitgeholfen haben.

Gruss Claudio

Guten Morgen Claudio,

so sieht das ganz vernünftig aus!

Vielleicht spendiert uns Siquando ja mal ein modernes RSS Modul, dann ist die Einbindung sehr viel einfach zu bewerkstelligen.

Ah - noch etwas, Du kannst den Link ein bisschen schicker formatieren.

<div class="paragraph"><p>..........hier der Code den Du schon drin hast.........</p></div>

Hallo allen,

ich hatte die gleiche Herausforderung auch einmal und denke es damals tatsächlich und sehr elegant gelöst zu haben.

Schaut mal auf den folgenden Link:

http://www.kakivi.de/kakivi-wetterinfo-2-bayreuth.php

Hier habe ich absichtlich nur einen bestimmten Teil einer anderen Website mit eingebunden.

Falls Fragen und/oder Bemerkungen, bitte bei mir melden.

Gruß, Piotr

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

<!-- 
#container{
width:580px; // eine größere Breite als der bevorzügte Ausschnitt, macht keinen Sinn.
height:540px; // entscheidet die Höhe des dargestellten Fensters.
overflow:hidden; // entfernt alle Infos links und oberhalb des Ausschnittes.
margin-left:13px; // "verschiebt" das Fenster 13 px nach rechts.
} 
#container iframe{     
width:812px; // die exakte Breite des bevorzügten Ausschnittes.
height:685px; // de exakte Höhe des bevorzügten Ausschnittes.
margin-left:-260px; // die exakte Verschiebung nach rechts (ist ein negativ Wert).
margin-top:-177px; // die exakte Verschiebung nach unten (ist ein negativ Wert).    
border:0; 
}
-->
 
<head> 
<title></title> 
<style type="text/css"> 
#container{     
width:580px;    
height:540px;     
overflow:hidden;     
margin-left:13px; 
} 
 
#container iframe{     
width:812px;     
height:685px;     
margin-left:-260px;     
margin-top:-177px;       
border:0; 
} 
</style>
</head>
 
<body> 
<div id="container"> 
<iframe src="http://europa.buienradar.nl/3-uur" scrolling="no";></iframe>
</div>
</body>

Edit:
Hallo Piotr, bitte nutze für das Posten von Code den zur Verfügung stehenden Code-Button "{ }". Danke Dir! Ich habe dies nun entsprechend geändert. [Volker W.]