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?

5 Antworten

Llandyl

16.02.2017, 13:44

Geht besser mit jQuery

<div id='iframediv'>
</div>

<script>

$('#iframediv').load('https://www.url.bsp #DIV_ID');

</script>

Das funktioniert aus Sicherheitsgründen natürlich nur für Seiten auf derselben Domain.

Llandyl

16.02.2017, 13:49

Sorry, war Blödsinn, ist ja ne andere Domain...

Llandyl

16.02.2017, 14:00

Habe nochmal gesucht und was Schönes gefunden:

<div style="border: 3px solid rgb(201, 0, 1); overflow: hidden; max-width: 736px;">
<iframe scrolling="no" src="http://www.gastronavi.de/restaurants/10076/speisekarten/speisekarte" style="border: 0px none; margin-left: -185px; height: 650px; margin-top: -200px; width: 926px;">
</iframe>
</div>

Mit den CSS-Attributen margin-left und margin-top am iframe kannst du die Positionierung des Ausschnitts einstellen. Wenn du die Werte änderst, musst du gleichzeitig die width und height um das negative des entsprechenden Wertes anpassen, damit der Kasten gleich groß bleibt.

Effektive Breite und Höhe des Kastens sind width + margin-left, bzw. height + margin-top.

Wichtig ist das scrolling="no" am iframe und das overflow: hidden am umgebenden div.

MonkeyKing

16.02.2017, 13:40

Du kannst die Seite per Ajax laden und dann den Teil extrahieren - das ist dann aber reines HTML ohne Styles usw.

Woher ich das weiß:Berufserfahrung – 20 Jahre Berufserfahrung

Kieselsaeure

16.02.2017, 16:38

u.U. je nach header noch nicht mal das

Kieselsaeure

16.02.2017, 16:38

funktioniert nicht sofern das ajaxscript nicht von der externen seite selbst eingebunden wurde ^^

MonkeyKing

16.02.2017, 17:43

@Kieselsaeure

Jein, man kann es machen aber es kann ziemlich komplex werden... Siehe hier http://stackoverflow.com/questions/15005500/loading-cross-domain-html-page-with-ajax

Kieselsaeure

Nutzer, der sehr aktiv auf gutefrage ist

im Thema programmieren

16.02.2017, 16:40

Nimm doch in php zb curl etc und schneide das unnötige raus/hole nur was du willst

mastema666

Nutzer, der sehr aktiv auf gutefrage ist

im Thema programmieren

16.02.2017, 14:24

Das dürfte nur mit HTML / CSS / JS nicht funktionieren, du könntest die Seite aber mit PHP laden (via file_get_contents() bzw cURL) und dir da nur den gewünschten Teil raussuchen (z.B. via RegEx / preg_match()). Dann kannst du das beliebig auf deiner Seite anzeigen, sogar ohne iFrame.

Ich würde die Daten aber zumindest cachen, wenn die jedes Mal geholt werden bekommst du möglicherweise sonst Ärger mit dem Betreiber der Seite (je nachdem wie häufig deine aufgerufen wird, bei irgendwie 5-10 Besuchern am Tag wird das keinem auffallen, bei 500-1000 schon eher^^).

Ähnliche Beiträge

Urheberrecht auf HTML Codes?!

Hallo, gilt das Urheberrecht auch auf HTML Codes.

BSP: Ich würde eine Website "programmieren", dürfte dann eine x beliebige Person diese kopieren, die Grafiken, Texte und Links austauschen und diese Website dann als seine benutzen?

Auf welchen Sprachen gibt es Copyright? HTML, CSS, HTML, Javascript?

Vielleicht kennt ihr euch da besser aus. Mit Goolge hab ich auch nichts gefunden.

...zum Beitrag

Besucherzähler in Website einbauen?

Wie macht man das am besten über HTML, da ich nur HTML Codes in IONOS einfügen kann? Und funktioniert dies überhaupt?

Grüße

...zum Beitrag

Html, Javascript <div> ab bestimmter Scrollposition einblenden?

Hallo!

Ich programmiere mir gerade eine Website und habe erst ein Menüband oben. Ab einer bestimmten Scrollposition soll dieses div verschwinden, und ein anderes auftauchen! Kann mir bitte jemand den Code senden? Danke!

...zum Beitrag

Website-Änderungen werden nicht angezeigt wegen Browser-Cache?

Hallo zusammen,

ich habe folgendes Problem:

Ich hoste meine Website bei Ionos. Dort habe ich meine Codes (HTML, CSS, JavaScript und PHP) im Webspace abgelegt, der mit der Domain verbunden ist.

Nun habe ich an der Website Änderungen vorgenommen und z.B. eine mobile Ansicht implementiert. Ich habe die alten Code-Dateien überschrieben.

Auf der Website werden diese Änderungen aber nicht angezeigt, wenn man die Website vor kurzem bereits besucht hatte, da der Browser-Cache die alten Daten noch gespeichert hat.

Gibt es hier eine Möglichkeit, das zu verhindern und für die Nutzer direkt die neue Version anzeigen zu lassen?

Ich danke für eure Rückmeldungen :)

...zum Beitrag

Ü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

...zum Beitrag

Elemente nur an bestimmten Zeitpunkten anzeigen?

Hey, ich möchte gerne, dass ein Element auf meiner Website ab dem 27.10.2022 bis 24.12.2022 angezeigt wird. Könnte mir jemand vielleicht eine Seite oder einen Bsp-Code schicken? Ich bin noch am Lernen.

Ich bedanke mich!

...zum Beitrag

Wo ist der Fehler im HTML Code?

Ich habe einen kleinen Fehler im meiner Überschrift entdeckt.

Auf der Seite steht das zwar korrekt da. Aber der Text bei der Maus zeigt einen Teil des html codes. Hier der Code

<li class="pos2" role="presentation">
<a href="/Text/Text-mit-co2-Text/" title="Text mit CO<sub>2</sub> Text" data-urlname="">
<span class="menu-text">Text mit CO<sub>2</sub> Text</span></a>
</li>

Da wo Text steht, steht dann die Überschrift usw.

Das Problem ist jetzt. Dass beim Text bei der Maus auf der Seite steht:

Text mit CO<sub>2</sub> Text

Es soll aber eben das <sub></sub> nicht dabei stehen und die 2 tiefergestellt sein.

Wie gesagt, angezeigt wird es richtig, nur der Text bei der Maus, wenn man auf diesen Link geht, steht dann mit den Code da.

Wie bekommt man das hin?

...zum Beitrag

Alternative für Trinket?

Hallo Leute, ich baue gerade eine Website für meine Facharbeit mit HTML, CSS und JavaScript. Auf der Website soll 1 Python Programm gezeigt werden (also der Code) und es soll eine Konsole geben, mit der man das Programm ausführen kann und wenn nötig (also das Programm fragt den Nutzer etwas einzugeben um dann spezielle Berechnungen zu tätigen) etwas eingeben kann. Gibt es einer Möglichkeit dies direkt mit HTML, CSS und JavaScript zu erstellen, oder braucht man da direkt ein Programm wie Trinket, dessen Code man dann einbetten kann. Wenn ja, gibt es andere solche Tools. Oder wie würde sowas dann funktionieren, wenn man es direkt programmiert?

Vielen Dank an alle, die sich für diese Frage Zeit nehmen!

LG Melleo

...zum Beitrag

Suchfeld einbetten Wix.com?

Servus,

wenn ich über den HTML Code eine Suchleiste in ne Website bei Wix.com einbetten will (KostenloseVersion) dann werde ich nie auf die Suchseite des Suchdienst es (ddg oder Google) weitergeleitet. Was kann ich tun?

...zum Beitrag

Programmierung herkömmlich HTML versus CMS?

Früher habe ich Websites mit Dreamweaver gemacht, sprich mit HTML und ensprechender Datenbank-Anbindung. Heute kann man ja auf verschiedene Frameworks und Content Management Systeme zurückgreifen.

Welche Gründe sprechend heute dagegen es wie früher händisch zu machen?

...zum Beitrag

Ein "Create"-Button, der eine neue Seite erstellt über php?

Grob gesagt, habe ich vor einen "Create"-Button zu erstellen, der, wenn man auf ihn klickt, eine neue HTML-Seite erstellt, diese HTML-Seite, soll dann ein vorgefertigtes Design haben und soll eine bestimmte CODE haben, denn man wiederum irgendwo eingeben könnte. Als Beispiel könnte man "Discord" nehmen, mit dem Create und Join Buttons.

...zum Beitrag

Website nur mit Code bzw. Kennwort betreten?

Hallo, wie kann ich mir quasi eine „private“ Website machen? Also so das man nur mit einem Code bzw. einem richtigem Kennwort beitreten kann?

...zum Beitrag

Wie kann ich in Google Forms eigenen HTML-Code einfügen?

Ist das möglich? Wenn ja, wie füge ich mein eigenes HTML & JavaScript in Google Forms ein?

Ich möchte es nicht andersherum machen und Google Forms in meiner Website einbetten, sondern direkt in Google Forms und den Share-Link teilen.

...zum Beitrag

DropDown-Menu Links für Handy?

wenn ich mein dropdown-menu habe, und ich will dass wenn sich dieses dropdown-menu öffnet und die kategorien zum auswählen bereitstellt, dass wenn ich auf die Kategorie klicke dann sich ein link öffnet, dies funktioniert mit meinem html code (auf der website version) perfekt, jedoch funktioniert dies nicht in der smartphone ansicht, warum das ?

Falls es hilft hier dier html-code

<!DOCTYPE html>

<head>

<title>Language Selection</title>

<style>

/* Dropdown Button */

.dropbtn {

font-size: 16px;

border: none;

}

/* The container <div> - needed to position the dropdown content */

.dropdown {

position: relative;

display: inline-block;

}

/* Dropdown Content */

.dropdown-content {

display: none;

position: absolute;

background-color: transparent;

min-width: 100px;

box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);

z-index: 1;

top: 100%;

left: 50%;

transform: translateX(-50%);

margin: 8px 0;

}

/* Links inside the dropdown */

.dropdown-content a {

color: transparent;

padding: 15px 13px;

text-decoration: none;

}

/* Change color of dropdown links on hover */

.dropdown-content a:hover {

background-color: transparent; /* Ändere die Hintergrundfarbe beim Hover */

}

/* Show the dropdown menu when hovering over the dropdown */

.dropdown:hover .dropdown-content {

display: block;

}

/* Keep the dropdown menu open when hovering over it */

.dropdown:hover .dropbtn {

background-color: transparent;

}

</style>

</head>

<body>

<div id="gtco-logo"><a href="index.html">Endo<em>scopy</em></a></div>

</div>

<ul>

<li><a href="#" data-nav-section="practice-areas">Anwendungsbereiche</a></li>

<li><a href="#" data-nav-section="technics">Operationstechniken</a></li>

<li><a href="#" data-nav-section="our-team">Unser Team</a></li>

<li class="btn-cta"><a href="#" data-nav-section="contact"><span>Kontakt</span></a></li>

<a href="#" class="dropbtn">Deutsch ∨</a>

<p><a href="italiano.html" class="italiano">Italiano</a></p>

<p><a href="english.html" class="english">English</a></p>

</div>

</li>

</ul>

</div>

</nav>

</div>

// JavaScript to handle dropdown menu clicks

document.addEventListener("DOMContentLoaded", function() {

var dropdownButtons = document.querySelectorAll(".dropdown .dropbtn");

var dropdownContents = document.querySelectorAll(".dropdown .dropdown-content");

// Function to toggle the dropdown content visibility

function toggleDropdown(index) {

if (dropdownContents[index].classList.contains("show")) {

dropdownContents[index].classList.remove("show");

} else {

dropdownContents[index].classList.add("show");

}

// Close dropdown content if clicked outside the dropdown

window.addEventListener("click", function(event) {

if (!event.target.matches('.dropbtn')) {

dropdownContents.forEach(function(content) {

content.classList.remove("show");

});

}

});

// Handle dropdown button clicks

dropdownButtons.forEach(function(button, index) {

button.addEventListener("click", function(event) {

event.stopPropagation(); // Prevent the document click event

toggleDropdown(index);

});

// Handle dropdown options clicks

var dropdownOptions = document.querySelectorAll(".dropdown-content a");

dropdownOptions.forEach(function(option) {

option.addEventListener("click", function(event) {

// Prevent default action

event.preventDefault();

// Redirect to the selected page

window.location.href = option.getAttribute("href");

});

</script>

</body>

</html>

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen