Wie postest du auf einem Iframe?

266

Wie poste ich Daten auf einem Iframe?

post iframe Murtaza Mandvi
quelle

407

Kommt darauf an, was du mit "Daten posten" meinst. Sie können das HTML- target=""Attribut für ein <form />Tag verwenden, es kann also so einfach sein wie:

<form action="do_stuff.aspx" method="post" target="my_iframe">
  <input type="submit" value="Do Stuff!">
</form>

<!-- when the form is submitted, the server response will appear in this iframe -->
<iframe name="my_iframe" src="not_submitted_yet.aspx"></iframe>

Wenn dies nicht der Fall ist oder Sie nach etwas Komplexerem suchen, bearbeiten Sie Ihre Frage bitte, um weitere Details aufzunehmen.

Es ist ein bekannter Fehler mit dem Internet Explorer, der nur auftritt , wenn Sie dynamisch sind Ihre iframes erstellen, usw. mit Javascript (es gibt eine Behelfslösung hier ), aber wenn Sie gewöhnlichen HTML - Markup verwenden, Sie sind in Ordnung. Das Zielattribut und die Frame-Namen sind kein cleverer Ninja-Hack. Obwohl es in HTML 4 Strict oder XHTML 1 Strict veraltet war (und daher nicht validiert wird), ist es seit 3.2 Teil von HTML, formal Teil von HTML5 und funktioniert in nahezu jedem Browser seit Netscape 3.

Ich habe dieses Verhalten als mit XHTML 1 Strict, XHTML 1 Transitional, HTML 4 Strict und im "Quirks-Modus" ohne Angabe von DOCTYPE überprüft und es funktioniert in allen Fällen mit Internet Explorer 7.0.5730.13. Mein Testfall besteht aus zwei Dateien mit klassischem ASP unter IIS 6. Sie werden hier vollständig reproduziert, sodass Sie dieses Verhalten selbst überprüfen können.

default.asp

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC
  "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>Form Iframe Demo</title>
  </head>
  <body>
  <form action="do_stuff.asp" method="post" target="my_frame">
    <input type="text" name="someText" value="Some Text">
    <input type="submit">
  </form>
  <iframe name="my_frame" src="do_stuff.asp">
  </iframe>
  </body>
</html>

do_stuff.asp

<%@Language="JScript"%><?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC
  "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>Form Iframe Demo</title>
  </head>
  <body>
  <% if (Request.Form.Count) { %>
  You typed: <%=Request.Form("someText").Item%>
  <% } else { %>
  (not submitted)
  <% } %>
  </body>
</html>

Es würde mich sehr interessieren, von einem Browser zu hören, der diese Beispiele nicht korrekt ausführt.

Dylan Beattie
quelle

1

Wie weiter unten ausgeführt, funktioniert das Ziel im Formular möglicherweise nicht in IE7. Sie sollten dies testen.

NexusRex

12

Das Problem mit IE 7 besteht darin, dass beim Generieren des Iframes mit Javascript das Namensschild nicht festgelegt wird (auch wenn Sie versuchen, es festzulegen), warum das Post-Ziel fehlschlägt. Die Lösung für IE7: stackoverflow.com/questions/2181385/…

mrD

Gibt es eine Möglichkeit, den Inhalt des Ausgaberahmens in einer Datei zu speichern (z. B. Antwort vom Server, an den das Formular gesendet wurde)?

ZeroGraviti

@ZeroGraviti Es ist nicht ganz klar, was Sie unter "In einer Datei speichern" verstehen. Was Sie tun können, ist, das Formular an einen IFRAME zu senden und die Antwort einen Content-Disposition-Header setzen zu lassen, wie unter stackoverflow.com/questions/1012437/… beschrieben. Der Benutzer klickt also auf "Senden" und sendet ihn an einen IFRAME Der Browser empfängt die Antwort und fordert den Benutzer auf, die Datei auf seinem lokalen Computer zu speichern. Ist es das, wonach du suchst?

Dylan Beattie

@ DylanBeattie, lassen Sie mich meinen Anwendungsfall klären. Ich konnte einen Iframe füllen, der als targetAttribut für einen HTML-Code festgelegt wurde <form>. Nachdem das Formular veröffentlicht wurde und ich den Inhalt im Ziel-Iframe sehen kann, möchte ich dem Benutzer eine Option zum Speichern dieses Inhalts in einer Datei bereitstellen. Das wollte ich fragen. Lassen Sie mich wissen, ob dies mehr Klarheit erfordert.

ZeroGraviti

25

Ein Iframe wird verwendet, um ein anderes Dokument in eine HTML-Seite einzubetten.

Wenn das Formular an einen Iframe innerhalb der Formularseite gesendet werden soll, kann es mithilfe des Zielattributs des Tags problemlos erreicht werden.

Setzen Sie das Zielattribut des Formulars auf den Namen des iframe-Tags.

<form action="action" method="post" target="output_frame">
    <!-- input elements here --> 
</form>
<iframe name="output_frame" src="" id="output_frame" width="XX" height="YY">
</iframe>

Erweiterte Verwendung von Iframe-Zielen
Diese Eigenschaft kann auch verwendet werden, um eine Ajax-ähnliche Erfahrung zu erzeugen, insbesondere in Fällen wie dem Hochladen von Dateien. In diesem Fall ist das Senden des Formulars zum Hochladen der Dateien obligatorisch

Der Iframe kann auf eine Breite und Höhe von 0 festgelegt werden, und das Formular kann mit dem auf den Iframe festgelegten Ziel gesendet und ein Ladedialog geöffnet werden, bevor das Formular gesendet wird. Es verspottet also ein Ajax-Steuerelement, da das Steuerelement weiterhin im Eingabeformular jsp verbleibt und der Ladedialog geöffnet ist.

Beispiel

<script>
$( "#uploadDialog" ).dialog({ autoOpen: false, modal: true, closeOnEscape: false,                 
            open: function(event, ui) { jQuery('.ui-dialog-titlebar-close').hide(); } });

function startUpload()
{            
    $("#uploadDialog").dialog("open");
}

function stopUpload()
{            
    $("#uploadDialog").dialog("close");
}
</script>

<div id="uploadDialog" title="Please Wait!!!">
            <center>
            <img src="/imagePath/loading.gif" width="100" height="100"/>
            <br/>
            Loading Details...
            </center>
 </div>

<FORM  ENCTYPE="multipart/form-data" ACTION="Action" METHOD="POST" target="upload_target" onsubmit="startUpload()"> 
<!-- input file elements here--> 
</FORM>

<iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;" onload="stopUpload()">   
        </iframe>

kapil
quelle

Danke, es ist wichtig, dass <iframe> nach </ form> steht, wie Sie geschrieben haben

Igor Fomenko

2

Diese Funktion erstellt ein temporäres Formular und sendet dann Daten mit jQuery:

function postToIframe(data,url,target){
    $('body').append('<form action="'+url+'" method="post" target="'+target+'" id="postToIframe"></form>');
    $.each(data,function(n,v){
        $('#postToIframe').append('<input type="hidden" name="'+n+'" value="'+v+'" />');
    });
    $('#postToIframe').submit().remove();
}

Ziel ist der 'Name'-Attribut des Ziel-iFrames, und Daten sind ein JS-Objekt:

data={last_name:'Smith',first_name:'John'}

Dr. Fred
quelle

0

Wenn Sie Eingaben in einem Iframe ändern möchten, senden Sie das Formular von diesem Iframe aus

...
var el = document.getElementById('targetFrame');

var doc, frame_win = getIframeWindow(el); // getIframeWindow is defined below

if (frame_win) {
  doc = (window.contentDocument || window.document);
}

if (doc) {
  doc.forms[0].someInputName.value = someValue;
  ...
  doc.forms[0].submit();
}
...

Normalerweise können Sie dies nur tun, wenn die Seite im Iframe denselben Ursprung hat. Sie können Chrome jedoch in einem Debug-Modus starten, um dieselbe Ursprungsrichtlinie zu ignorieren und dies auf einer beliebigen Seite zu testen.

function getIframeWindow(iframe_object) {
  var doc;

  if (iframe_object.contentWindow) {
    return iframe_object.contentWindow;
  }

  if (iframe_object.window) {
    return iframe_object.window;
  } 

  if (!doc && iframe_object.contentDocument) {
    doc = iframe_object.contentDocument;
  } 

  if (!doc && iframe_object.document) {
    doc = iframe_object.document;
  }

  if (doc && doc.defaultView) {
   return doc.defaultView;
  }

  if (doc && doc.parentWindow) {
    return doc.parentWindow;
  }

  return undefined;
}

Dominique Fortin
quelle

Wie postest du auf einem Iframe?

Antworten: