Einen bestimmten, festgelegten Bereich einer anderen HTML Seite per iframe einbetten - mit HTML & CSS möglich? habt Ihr Ideen wie man es lösen könnte?

Hallo an alle :)

Eine Seite generell einzubetten, habe ich hinbekommen, ebenso habe ich das Scrollen im iframe bereits (wie auch gewünscht) deaktiviert und wenn man auf Links klickt, öffnen sich diese nicht im eingebetteten Rahmen, sondern in einem neuen Browser-Tab. Soweit, so gut.

Aktuell hänge ich an der Frage, wie und ob, ich auf der Seite, in diesem "iframe" einen bestimmten, von mir vordefinierten Teil der eingebetteten Seite anzeigen lassen kann!? Aktuell wird einfach der komplette obere Teil der eingebetteten Seite angezeigt (weil ich scrollen deaktiviert habe), man soll allerdings nur einen Teil in der Mitte der eingebetteten Seite sehen, nicht die komplette Seite. Habt ihr eine Idee, wie und ob man das am einfachsten lösen kann?

vielen Dank und viele Grüße :)

Anke

2 Antworten

JutenMorgen

14.04.2017, 20:30

Mir würde nur eine Lösung einfallen. Wenn du ein Element mit ID auf der Website im iframe hast, kannst du einfach einen Bookmark am link anhängen

Bookmarks funktionieren so, dass du über einen Link zu einem bestimmten Element der Website springst, hierzu braucht dieses Element allerdings logischerweise eine ID. Das ganze geht dann so:

<a href="#BOOKMARK">JUMP TO BOOKMARK!</a>

<h1 id="BOOKMARK">IM HERE NOW!</h1>

Also wird vor der id "BOOKMARK" einfach nur eine # eingefügt. Davor kannst du auch noch www.example.com einfügen, denn sonst sucht er nur auf der eigenen Seite nach der id.

Hier ein Beispiel:
https://de.wikipedia.org/wiki/Website#Bestandteile

Liebe Grüße, JutenMorgen!

AnnaOHa

14.04.2017, 20:18

Wenn Du genau weißt, wo sich dieser Teil befindet: setz das iframe innerhalb eines Containers, der overflow: hidden und position: relative gesetzt hat und so groß ist wie der Teil der Seite, den Du zeigen möchtest. Nun gibst Du dem iframe bei height und width sehr hohe Werte, nutzt position: absolute und schiebst es mit left: -100px und top: -100px (natürlich passende Zahlen wählen, das musst Du ausprobieren) so weit "aus" dem Container, dass nur der gewünschte Teil sichtbar ist.

AnnaOHa

14.04.2017, 20:24

Als Beispiel: https://jsfiddle.net/pbj8at60/

Ähnliche Fragen

Manuelles scrollen deaktivieren HTML?

Ich habe ein iframe erstellt. Mein Problem ist, das es manuell gescrollt werden kann. Es soll mit Javascript gescrollt werden können, aber nicht durch ziehen des Fingers/bewegen des Mausrads.

Wie geht das?

LG Bohne47

...zur Frage

Bestimmter Ausschnitt einer Website in eine andere Website einbetten Html?

Ich habe momentan folgender Html Code in meiner Programmierung:

Ich möchte aber nur ein bestimmten Teil von der Website einblenden, kann mir jemand helfen?

...zur Frage

Über PHP HTML Quellcode auslesen und in Variable speichern?

Hallo,

Kennt jemand eine Möglichkeit wie ich mit PHP einen bestimmten Teil HTML Quellcode aus der gerade geöffneten Seite/oder generell aus einer Datei auslesen kann und diesen dann als Text in einer ganz normalen PHP Variablen speichern kann.

Mit bestimmten Teil meine ich zum Beispiel alles was in einem Element wie einem div mit einer bestimmten id steht.

Zum Beispiel dieser HTML Code:

<body>
  <div id="Div1">
      <h1> Nicht dieses Div </h1>
  </div>

  <div id="Div2">
      <h1> Dieses Div </h1>
  </div>

  <div id="Div3">
      <h1> Nicht dieses Div </h1>
  </div>
</body>

Wenn ich dann den Inhalt von Div2 in eine PHP Variable schreiben wil soll in der Variable: "<h1> Dieses Div </h1>" stehen.

Ich hoffe meine Frage ist verständlich und jemand kennt eine Lösung.

Vielen Dank im voraus :D

...zur Frage

HTML Formular - vordefinierten Text verschwinden lassen?

Guten Abend zsm.

Ich hoffe, mir kann hier jemand eine Lösung/Idee geben. Aktuell bin ich grad dran, im HTML ein Formular zu schreiben.

Das ganze ist in einem Form- & Label-Tag verschachtelt (Bin nicht sicher, ob ich den label weglassen könnte). Nun möchte ich z.B. im Name-Feld einen vordefinierten Text haben (z.B. Name oder Ihr Name), welcher allerdings beim reinklicken verschwindet.

Aktuell sieht der Code so aus:

   <label>
            <input type="text" maxlength="30" value="Name" name="Name">

Über den den value gebe ich ihm den vordefinierten Text. Allerdings muss der Besucher dann den Text erst auswählen, löschen und dann reinschreiben. Gibt es die Möglichkeit, dass direkt beim 'reinklicken' in dieses Feld der vordefinierte Text verschwindet, wie man es im Web bei vielen Formularen findet?

Suche nebenbei noch bei w3schools, selfhtml und in Foren, bin aber bisher noch nicht fündig geworden.

Danke für jeden Tipp, wie ich das lösen könnte!

Gruss, jeff

...zur Frage

Youtube Fenster minimiert?

Guten Abend, Ich habe aktuell ein Problem mit meiner Youtubeansicht. Auf der Seite wirkt alles vergrößert und ich habe keine Ansicht auf das komplette Fenster, daher muss ich immer zu Seite scrollen um den Rest zu sehen. Ich bitte um Hilfe! LG

...zur Frage

HTML/CSS iPhone Video Tag?

wie verhindere ich das der Mobile Safari Browser automatisch in den Fullscreen Mode geht um ein video abzuspielen?

Habe schon sehr vieles ausprobiert auf Stackoverflow.

und warum funktioniert es manchmal nicht ein Iframe Youtube video einzubetten ?
Liegt es an der Musik oder an der länge des videos ?

...zur Frage

Basic HTML Kästchen positionieren?

Hey.

Also ich weiß, dass es bei HTML divs gibt die sozusagen Blöcke sind die man mit Eigenschaften versehen kann via CSS.

nun wollte ich ein einfaches web layout gestalten aber scheitere daran, dass ich divisions einmal rechtsbündig und einmal linksbündig zentriere mit nem abstand dazwischen

wie ihr sehen könnt habe ich es dann zusammen gepfuscht bekommen sodass die abstände halbwegs passen.

gibt es da einen besseren zugang ? Bitte nur Tipps will selbst auf die Lösung kommen :)

bin auch schon am Überlegen den Code komplett neu zu schreiben :)

habe euch ein bild vom layout gemacht. dachte eigentlich ich mache für jedes kästchen eine eigene div umgeben von einer master div welche die komplette breite bestimmen soll.

und darin dann eben die einzelnen divs entweder zentrieren oder rechts / links

nur weil ich eben 2 kästchen in einer reihe habe dachte ich daran es mit einem table zu lösen und in der tr dann eben 2x TD damit die divs nebeneinander sein können

nicht geklappt. hab eigentlich schon so ziemlich alles probiert. divs hinzufügen, entfernen und über css habe ich versucht einzelne elemente zu manipulieren etc.

haut leider nicht hin.

Was meint ihr zu den bilder crop und größen veränderung. ich weiß man könnte es mit photoshop auf die entsprechende größé trimmen aber ich wollte es mit html/css schaffen :)

habe auch versucht den code Schön zu machen als "Lesbar", was hält ihr davon?

HTML

http://pastie.org/p/2vfSJIRfb5QSHBNQciATWO

Header CSS

http://pastie.org/p/6wEHhhZQWKYwwfC2RSxof3

Mainstyle CSS

http://pastie.org/p/5gFxKIEBpI0f5dlimjen9X

Footer CSS

http://pastie.org/p/5oUkLA58gIJ8cgWjw6gGTq

...zur Frage

Mit Javascript zu einem Teil im HTML Dokument springen?

Hallo !

Ich bin gerade dabei eines meiner ersten Projekte mit JavaScript/CSS/HTML umzusetzen.

Ich bin gerade dabei eine Suchfunktion einzubauen.

Ich habe eine Layout von Material Design Lite verwendet. Ich habe es so umgesetzt, dass das ganze im einem HTML Formular steht und beim absenden (drücken der ENTER Taste) eine JavaScript Funktion ausgeführt wird. Bei dieser hole ich mir mithilfe von document.getElementById().value den Wert der eingegeben wurde und sage, dass dieser Wert auf eine Variable übertragen wird. Ich frage per If und else ab was eingeben wurde (Bsp. 1) und will dann das zum einem bestimmten Teil im HTML Text gesprungen wird.

Mein Problem :

Ich muss es irgendwie umsetzen, dass mit JavaScript Code zu einem bestimmten Teil (im HTML Text ) gesprungen wird OHNE das man auf einen Link klicken muss.

Weiß jemand von euch hier, wie das möglich ist ?

(Danke für deine Zeit, beim Lesen und Danke für jede Antwort)

Hier der Code meiner JavaScript Funktion

Hier der Code des HTML Formulars

...zur Frage

HTML-Code einer Tabelle (Internetseite) in OneNote einfügen?

Ich möchte in OneNote eine Tabelle (die ständig aktualisiert wird) von einer Internetseite einfügen. Es gibt von der Internetseite auch einen dazugehörigen HTML-Code.

Diesen HTML-Code einfach in OneNote einzufügen bringt allerdings nichts.

Ich lese unter Hilfen was von
"Geben Sie im Eingabe-HTML-Code im Teil Presentation Ihrer Anforderung

<img data-render-src="name:part-name" />

an. Dabei ist part-name der eindeutige Bezeichner des Datenteils in Ihrer mehrteiligen Anforderung, der den HTML-Code enthält.

Hilft mir irgendwie nicht weiter. Das ist Neuland für mich, ich quäle mich seit Stunden durch, ohne gewünschtes Ergebnis.

Kann hier jmd. weiterhelfen?
Um diesen HTML-Code geht es, wo könnte mein Fehler liegen?

Gruß
GelberHut

...zur Frage

HTML/CSS hintergrund gesplittet Schwarz weiß?

Hallo,

ich möchte den Hintergrund auf meiner Website gesplittet weiß mit einer Ecke schwarz haben.

(gewollte Ansicht der Seite)

Aktuell benutzte ich ein riesieges svg Rechteck um den Teil einzufärben und limmitiere die ansicht der seite auf die gewollte Ansicht, scheint mir aber eher ineffizient zu sein, gibts da eine bessere Methode das zu lösen?

(gesamt Ansicht der seite)

Hier der aktuelle code:

(die Koordinaten sind wahrscheinlich etwas merkwürdig weil ich sie mir von einem Programm passgenau hab berechnen lassen)

HTML:

   <svg class="black_bg">
      <rect fill="rgba(0,0,0,1)" id="Rechteck_29" rx="0"  ry="0" x="0" y="0" width="1175" height="1649">
      </rect>
   </svg>

css:

.black_bg {
   width: 1175px;
   height: 1649px;
   position: absolute;
   overflow: visible;
   transform: matrix(1,0,0,1,1744.92,-218.8203) rotate(24deg);
   transform-origin: center;
}

...zur Frage

[HTML] Wie kann ich das fixieren?

Also, Text (der schwarze Kasten) ist ein ewig langer Text...

Text 2 (der rote Kasten) soll ein Hallo beinhalten und dort "fest" gemacht werden,

also um es zu erklären, man soll den Linken Teil scrollen können, nur der rechte Teil (Text 2) soll immer dort bleiben. Egal ob man scrollt oder nicht.

...zur Frage

nur einen bestimmten Teil einer Webseite mittels frame in andere Seite einbinden

Wie man mit iframe arbeitet weiß ich. Mein Problem ist jedoch, dass ich nicht weiß, wie ich mittel frame nicht eine ganze Seite sondern nur einen bestimmten Teil davon einbinden kann.

Konkreter: Es gibt Seite A und Seite B

Auf Seite A soll mittels frame der untere rechte Teil von Seite B erscheinen.

Wie kriege ich das hin?

Bitte keine Diskussionen ala "was sagt denn der Besitzer von B dazu?" Mir gehören beide Seiten.

...zur Frage

Neues Fenster Öffnen (mit bestimmter Größe)

hi, ich hätte gerne, dass wenn man auf die Website kommt sich ein neues Fenster in der Größe Höhe= 750px und Breite=700 px mit der Seite landtag.square7.ch/Landtag öffnet. Nach Möglichkeit sollte dieses Fenster keine Adresszeile aufweisen und mittig sein... Ich kann leider kein html, daher habe ich auch die seite bei selfhtml dazu nicht verstanden... Könnte mir jemand den Quell code dazu geben? Danke! lg floking8

...zur Frage

Web Entwicklung Kurs noch aktuell oder nicht?

Ich habe so nen coolen Kurs für Web Entwicklung mit HTML, CSS, Javascript, jQuery, Bootstrap, PHP auf Udemy gesehen aber der ist von 2019.. haben sich die Dinge schon zu stark verändert in den letzten 4 Jahren oder kann man den noch machen?

Die komplette Web-Entwickler Masterclass | Udemy

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen