Wie poste Sie auf ein iframe?
https://stackoverflow.com/questions/168455
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Wie poste Sie Daten auf einem Iframe?
Lösung
Hängt was Sie mit „Post-Daten“ bedeuten. Sie können das HTML-target="" Attribut auf einem <form />-Tag verwenden, so könnte es 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 das nicht es ist, oder Sie nach etwas komplexer, bitte bearbeiten Sie Ihre Frage ausführlicher schließen.
Es ist ein bekannter Fehler mit dem Internet Explorer, der nur auftritt, wenn Sie dynamisch sind Ihre iframes erstellen, usw. mit Javascript (es gibt ein work-around hier ), aber wenn Sie gewöhnlichen HTML-Markup verwenden, sind Sie in Ordnung. Das Zielattribut und Frame-Name ist nicht irgendeine kluge ninja Hack; obwohl es (und daher validiert nicht) ist veraltet und wurde in HTML 4 Strict oder XHTML 1 Streng, ist es seit 3.2 Teil von HTML gewesen, dann ist es offiziell Teil von HTML5, und es funktioniert in jedem Browser nur etwa seit Netscape 3.
Ich habe dieses Verhalten bestätigt als mit XHTML 1 Streng, XHTML 1 Transitional, HTML 4 Strict und in "Quirks-Modus" ohne DOCTYPE arbeitet angegeben, und es funktioniert in allen Fällen mithilfe von Internet Explorer 7.0.5730.13. Mein Testfall aus zwei Dateien bestehen, mit klassischen ASP auf IIS 6; sie hier vollständig wiedergegeben, so dass Sie dieses Verhalten für sich selbst überprüfen kann.
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 sein von jedem Browser zu hören, die diese Beispiele nicht richtig laufen.
Andere Tipps
Ein iframe verwendet wird, ein anderes Dokument innerhalb einer HTML-Seite einzubetten.
Wenn das Formular in der Formularseite zu einem Iframe vorgelegt werden soll, dann kann es leicht mit dem Zielattribut des Tags acheived werden.
Stellen Sie das Zielattribut des Formulars auf den Namen des iframe-Tag.
<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 iframe Ziel Verwendung
Diese Eigenschaft kann auch eine Ajax-ähnliche Erfahrung, insbesondere in Fällen wie Datei-Upload zu erzeugen, verwendet werden, in dem Fall, in dem es zwingend notwendig, wird das Formular abzuschicken, um die Dateien
Die iframe kann zu einer Breite und einer Höhe von 0 gesetzt werden, und die Form mit dem auf die iframe eingestellten Ziel vorgelegt werden, und eine Lade Dialog geöffnet vor dem Absenden des Formulars. Also, es spottet eine Ajax-Steuerung als die Steuerung bleibt im Eingabeformular jsp, mit dem Laden-Dialog geöffnet.
Exmaple
<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>
Mit dieser Funktion eine temporäre Form erstellt, dann Daten senden 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‘ attr des Ziel iFrame und Daten ist ein JS Objekt:
data={last_name:'Smith',first_name:'John'}
Wenn Sie dann in einem Iframe-Eingänge zu ändern, um die Form von diesem iframe einreichen, dies zu tun
...
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 in der iframe aus dem gleichen Ursprungs ist, aber Sie können Chrome in einem Debug-Modus starten Sie den gleichen Ursprung Politik außer Acht zu lassen und diese testen auf einer beliebigen Seite.
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;
}
