web-dev-qa-db-de.com

Wie postest du in einem iframe?

Wie bucht man Daten in einen iframe?

249
Murtaza Mandvi

Hängt davon ab, was Sie mit "Postdaten" meinen. Sie können das HTML-Attribut target="" für ein <form />-Tag verwenden. Es könnte also so einfach sein:

<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 das nicht der Fall ist oder Sie etwas komplexeres suchen, bearbeiten Sie Ihre Frage bitte mit mehr Details.

Es gibt einen bekannten Fehler in Internet Explorer, der nur auftritt, wenn Sie Ihre Iframes usw. mithilfe von Javascript dynamisch erstellen (es gibt eine Problemumgehung hier ), aber wenn Sie gewöhnliches HTML-Markup verwenden fein. Das Zielattribut und die Frame-Namen sind kein kluger Ninja-Hack. Obwohl es in HTML 4 Strict oder XHTML 1 Strict veraltet war (und daher nicht validiert werden kann), ist es seit 3.2 Teil von HTML, es ist formal Teil von HTML5 und funktioniert seit Netscape 3 in fast jedem Browser.

Ich habe dieses Verhalten bei der Arbeit mit XHTML 1 Strict, XHTML 1 Transitional, HTML 4 Strict und im "Quirks-Modus" ohne Angabe von DOCTYPE bestätigt, und es funktioniert in allen Fällen mit Internet Explorer 7.0.5730.13. Mein Testfall besteht aus zwei Dateien mit klassischem ASP auf IIS 6; Sie werden hier vollständig reproduziert, sodass Sie dieses Verhalten für sich 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>

Ich wäre sehr daran interessiert, von jedem Browser zu hören, der diese Beispiele nicht korrekt ausführt.

387
Dylan Beattie

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

Wenn das Formular an einen iframe auf der Formularseite gesendet werden soll, kann es leicht mit dem target-Attribut des Tags erreicht werden.

Legen Sie das Zielattribut des Formulars auf den Namen des Iframe-Tags fest.

<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 ein ajax-ähnliches Erlebnis zu erzeugen, insbesondere in Fällen wie dem Datei-Upload. In diesem Fall muss das Formular gesendet werden, um die Dateien hochzuladen

Der iframe kann auf eine Breite und Höhe von 0 festgelegt werden. Das Formular kann mit dem Zielsatz an den iframe gesendet und ein Ladedialogfeld geöffnet werden, bevor das Formular gesendet wird. Es spottet also ein Ajax-Steuerelement, da das Steuerelement bei geöffnetem Ladedialog auf dem Eingabeformular JSP verbleibt.

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>
23
kapil

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();
}

target ist das 'name' -Attr des Ziel-iFrames und data ist ein JS-Objekt:

data={last_name:'Smith',first_name:'John'}
2
Dr Fred

Wenn Sie die 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 aus demselben Origin stammt. Sie können Chrome jedoch im Debug-Modus starten, um dieselbe Origin-Richtlinie zu ignorieren und diese 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;
}
0