Benötigt kein JavaScript oder Ähnliches. Sie müssen lediglich das `target`-Attribut des Formulars mit dem `name`-Attribut des Iframes abgleichen.
<form action="iframe.php" target="my-iframe" method="post">
<label for="text">Some text:</label>
<input type="text" name="text" id="text">
<input type="submit" value="post">
</form>
<iframe name="my-iframe" src="iframe.php"></iframe>
Die äußere Seite wird nicht einmal neu geladen. Aber auf den ersten Blick mag es so aussehen, da viele Browser den Ladekreis-Spinner in der Registerkarte anzeigen, wenn ein Iframe neu geladen wird.
Sind iFrames nicht eine riesige Belästigung/unnötig/hässlich und werden eigentlich nicht mehr verwendet?
Manchmal eine Belästigung. Manchmal sehr nützlich und notwendig. „Frames“ eher nicht.
Ausgezeichnet! Vielen Dank!
Wenn CORS benötigt wird, können iFrames eine Lösung sein
Sehr nützlich für das asynchrone Hochladen von Dateien.
Ein weiteres großartiger kleiner Snippet, so sehr ich iframes wegen ihrer Einschränkungen auch hasse, ich mag die Möglichkeit, sie für Datei-Uploads zu manipulieren.
Seltsam, das funktioniert einfach nicht.
Habe eine sehr einfache Seite mit nur dem Formular und der Iframe-Seite hochgeladen und es funktioniert nicht.
http://www.mercury14.co.uk/asdfgh/form.php
Übersehe ich etwas Offensichtliches?
Wird der Inhalt allen angezeigt oder nur Ihnen in dieser Sitzung?
Ich habe das gleiche Problem. Ich habe die Datei iframe.php erstellt, aber nichts erscheint, obwohl es in der Demo funktioniert. Bitte um Hilfe.
Wenn jemand anderes Probleme hat, dies zum Laufen zu bringen, versuchen Sie dies für die Seite iframe.php
<p>Ich werde wahrscheinlich in einem Iframe geladen.</p>
<p>Textwert: <?php echo $_POST[“text”]; ?></p>
Funktioniert nicht
Sie müssen die < auf die richtigen Symbole ändern
Das funktioniert auch nicht
Das liegt daran, dass Sie zum Rendern von < ein Semikolon zur Abgrenzung des Codes verwenden, nicht nur & lt.
Richtig: & l t ; (Leerzeichen entfernen)
Falsch: & l t
Gut...!
Diese Seite gefunden, während ich genau dieses Problem zu lösen versuchte. Ich habe schließlich jQuery verwendet, um einen GET-Query-String zu erstellen, und PHP, um ihn zu verarbeiten. Ich wollte Daten von einem Formular auf einer Seite an ein Formular in einem Fancybox-Iframe senden, das dann per AJAX übermittelt wird – das scheint recht gut zu funktionieren.
Können Sie teilen, wie Sie das gemacht haben? Ich versuche genau dasselbe zu tun. Ich habe ein Formular, und wenn der Benutzer Enter drückt, möchte ich, dass die PHP-Datei nach den Daten sucht und an ein Fancybox-Iframe postet...
Ich habe diesen Trick kürzlich für einen Bild-Uploader verwendet. Ich habe das Dateieingabefeld mit opacity:0 gestylt und sein Wrapper-Div mit einem schön aussehenden Bild für den Uploader-Button und dessen Hover. Sobald das Bild ausgewählt oder per Drag & Drop hochgeladen wurde, wird es in das Iframe gepostet, auf den Server hochgeladen und im nahtlosen Iframe direkt darüber angezeigt, um das skalierte und zugeschnittene Bild anzuzeigen.
Ich würde gerne einen Artikel darüber schreiben, mit allem Code. Alles mit HTML5, CSS3. Ich habe JS nur verwendet, um das Formular-Submit bei Änderung des Dateieingabefelds auszulösen.
Ich bin neu hier und habe Probleme.
Ich habe eine Website mit einem CSS-Dropdown-Menü, das 40px hoch ist. Der Menüinhalt ändert sich oft, sodass das Menü auf jeder Seite eine große Belastung wäre.
Ich habe einen iFrame für das Menü versucht, aber die Dropdown-Teile des Menüs werden vom iFrame abgeschnitten. Gibt es eine bessere Möglichkeit, dies zu tun, oder einen Trick, um das iFrame über dem Seiteninhalt schweben zu lassen, damit die Dropdowns sichtbar sind?
Schauen Sie sich an, wie man PHP modular verwendet; Sie verwenden separate PHP-Dateien und laden sie zusammen auf eine Seite, die wie eine Datei funktioniert.
Sobald Sie z. B. die Navigation bearbeiten, wird sie auf allen Seiten bearbeitet.
Das ist total genial!
Es lädt meine PHP-Datei in einen Iframe, ohne die Seite zu aktualisieren! Genau das, was ich mir erhofft hatte!
Danke fürs Posten. Du hast einem Menschen das Leben gerade einfacher gemacht!
Wenn Sie den Iframe dynamisch unter IE8 generieren, gibt es für diesen speziellen Browser eine Besonderheit. Sie müssen das Namensattribut in Ihrem document.createElement-Methodenaufruf angeben
var iframe;
try {
iframe = document.createElement('');
} catch (ex) {
iframe = document.createElement('iframe');
iframe.name = 'the-iframe-name';
}
Andernfalls wird der Formular-Upload einfach die aktuelle Seite ersetzen.
mehr Details
http://terminalapp.net/submitting-a-form-with-target-set-to-a-script-generated-iframe-on-ie/
Genial!
Es funktioniert auch mit externen Domains in der Formularaktion und der Iframe-Quelle (wie action=”http://anydomain.com/…”, src=”http://anydomain.com/…”, also umgeht es sozusagen die Same-Domain-Policy)
Vielen Dank!
Ich möchte die Registrierungsnummer in diesem Frame eingeben...
Bitte hilf mir...
Ich möchte die Registrierungsnummer in diesem Frame eingeben...
iframe name=”frame1″ src=”http://103.4.221.147/srmwebonline/exam/onlineResult.jsp” height=”416″ width=”570″ frameborder=”0″>
Bitte hilf mir...
Das ist genau das, was ich brauchte, um zwischen zwei Drupal-Instanzen zu posten! Danke!
Sehr nützlicher und einfacher Snippet, vielen Dank..
Ich lade eine aspx-Seite in einem Iframe innerhalb eines jQuery UI Dialogs, um einige Daten zu aktualisieren, und nachdem der Dialog geschlossen wurde, muss ich ein UpdatePanel auf der Elterenseite aktualisieren. Wie kann ich das tun? Genauer gesagt, es gibt ein DataGrid auf der Elterenseite, und nachdem ich Daten in einem Dialog-Modal-Iframe bearbeitet habe, möchte ich die Zeile im DataGrid aktualisieren.
Ist die Frage, wie man datagrid_selector schreibt, oder wie man den HTML-Code erhält, den man in meinerHTMLVariable braucht? Ich denke, ich habe für beides eine Antwort gegeben.
Kann ich diese Lösung verwenden, wenn ich den browserbasierten Upload von YouTube implementiere? Es scheint, dass alle Daten von YouTube verarbeitet werden, und ich erfahre erst vom Erfolg oder Misserfolg des Uploads, wenn er abgeschlossen ist.
Vielen Dank.
Ich habe ähnlichen Code für den Datei-Upload verwendet, jetzt verwende ich Flash. Aber das weckt alte Erinnerungen :)
Ich arbeite an einer Immobilienwebsite, die einen Iframe verwendet, um Immobilienangebote einzubinden. Ist es möglich, einige der CSS-Regeln zu überschreiben, die für das Styling des Inhalts des Iframes verantwortlich sind? Ich kann es mit Chrome-Entwicklertools ändern, aber wenn ich die Änderungen im Stylesheet vornehme, werden sie nicht angewendet. Jede Hilfe ist sehr willkommen.
Vielen Dank SO sehr. Das gibt mir genau das, was ich gesucht habe.
Brillant,
Endlich hast du mich gerettet! Ich habe nach einem so einfachen Code für meine Facebook PageTab-Anwendung gesucht, um PHP_POST auf meinem Server zu machen und Feedback von unseren Kunden direkt auf Facebook zu erhalten.
Vielen Dank, mein Freund, und viel Glück
Dieser Code ruft diese Aktion, d. h. iframe.php, in Chrome und IE9 zweimal auf, in Mozilla wird die Aktion nur einmal aufgerufen.
Bitte klären Sie das.
Admin, sag mir eine Sache: Angenommen, ich möchte einen JS-Code (über ein Textfeld) an einen anderen Cross-Domain-Server senden und die Ausgabe über ein Iframe erhalten. Ich habe dasselbe getan, und diese Sache funktioniert gut in Mozilla Firefox, scheitert aber in Chromium! Was ist das Problem? Im Fall von Mozilla erhalte ich die erforderliche Ausgabe des kompilierten JS vom Server über das Iframe, aber wenn ich das in Chromium versuche, erscheint kein JS-Code im Iframe, das ist verrückt!
Wie kann ich Daten und Dateien gleichzeitig mit Ajax und allen Validierungen hochladen?
Und wie greife ich auf die Antwort zu? (angenommen, Sie haben keinen Zugriff auf den Code der Seite, die im Iframe geladen wird)
Was soll ich in iframe.php einfügen?
Kann ich dasselbe Konzept für 100% Höhe und 100% Breite der Webseite verwenden, von der ich ein Iframe erstellen möchte? Bitte helfen Sie mir..
Dieser Beitrag hat mir sehr geholfen. Vielen Dank.
Wenn ich das versuche, zeigt die Website den Iframe an, bevor die Post-Daten gesendet werden, und sobald die Post-Daten gesendet wurden, beeinflusst dies den Inhalt des Iframes nicht. Es ist, als ob der Iframe nur vom Befehl seines src abhängt und keine Post-Daten von der Aktion empfängt. Fehlt mir da etwas? Vielleicht etwas, das in die willkürliche PHP-Datei gehört, außer einem
…
$variable=$_POST[‘element’];
…
Befehl?
Ich habe ein Projekt, bei dem ich Kundennamen, Adressen und Daten in einen eingebetteten Vertrag übergeben muss, der in einem Iframe von einem Drittanbieter (RightSignature) gehostet wird. RightSignature benötigt Textfelder, um diese Daten anzuzeigen, aber mein Kunde möchte, dass die Namen, Adressen und Daten in Platzhalter im Vertrag übergeben werden (nicht in Textfelder).
Es wäre sehr einfach, wenn es nicht in einem Iframe eines Drittanbieters wäre. Aber ich bin auch der Meinung meines Kunden... dass es einen Weg geben muss, dies zu tun, damit die Informationen eher so aussehen
Weihnachtsmann 25.12.16
123 Rentierweg
Nordpol, AK 12345
anstatt der Textfelder, die voreingestellte Breitenparameter benötigen, die dazu führen, dass es wie folgt aussieht
Weihnachtsmann 25.12.16
123 Rentierweg
Nordpol AK 12345
Vielen Dank für Ihren Input... wenn Sie wissen, wie man die Textfelder von RightSignature in ihren Iframe von Drittanbietern umgehen kann!
Diese Funktion erstellt ein temporäres Formular und sendet dann Daten mit jQuery
target ist das 'name'-Attribut des Ziel-Iframes und data ist ein JS-Objekt
data={last_name:'Smith',first_name:'John'}Wie benutze ich einen Iframe, um ein YouTube-Video aufpoppen zu lassen, weil
ich benutze so
path}}” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen>
diese Dinge, aber es wird immer noch geweigert, sich zu verbinden
Hat jemand Probleme mit diesem Ansatz in Chrome 83?
Beschriebener Prozess
* im allgemeinen Fall hier https://alfilatov.com/posts/how-to-pass-data-between-iframe-and-parent-window/
* und im Fall von Dateiübertragung https://alfilatov.com/posts/how-to-pass-file-into-an-iframe-and-convert-it-to-blob-for-further-ajax-request/