|
|||||||
|
How do you post to an iframe?
Время создания: 13.07.2018 15:30
Текстовые метки: javascript iframe post
Раздел: Javascript
Запись: Velonski/mytetra-database/master/base/1528548267k95xrvg4uk/text.html на raw.githubusercontent.com
|
|||||||
|
|
|||||||
|
How do you post data to an iframe? post iframe shareimprove this question edited Sep 17 '15 at 16:16 pnuts 42.7k75490 asked Oct 3 '08 at 19:18 Murtaza Mandvi 4,146196191 add a comment 3 Answers active oldest votes up vote 362 down vote accepted Depends what you mean by "post data". You can use the HTML target="" attribute on a <form /> tag, so it could be as simple as: <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> If that's not it, or you're after something more complex, please edit your question to include more detail. There is a known bug with Internet Explorer that only occurs when you're dynamically creating your iframes, etc. using Javascript (there's a work-around here), but if you're using ordinary HTML markup, you're fine. The target attribute and frame names isn't some clever ninja hack; although it was deprecated (and therefore won't validate) in HTML 4 Strict or XHTML 1 Strict, it's been part of HTML since 3.2, it's formally part of HTML5, and it works in just about every browser since Netscape 3. I have verified this behaviour as working with XHTML 1 Strict, XHTML 1 Transitional, HTML 4 Strict and in "quirks mode" with no DOCTYPE specified, and it works in all cases using Internet Explorer 7.0.5730.13. My test case consist of two files, using classic ASP on IIS 6; they're reproduced here in full so you can verify this behaviour for yourself. 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> I would be very interested to hear of any browser that doesn't run these examples correctly. shareimprove this answer edited May 23 '17 at 10:31 Community♦ 11 answered Oct 3 '08 at 19:28 Dylan Beattie 37.6k25106168 1 As was pointed out below, the target on the form may not work in IE7—you'll want to test that. – NexusRex Feb 8 '11 at 22:23 1 @NexusRex - tested, and yep, it works just fine in IE7. :) – Dylan Beattie Feb 8 '11 at 22:46 12 The problem with IE 7 is that if you generate the iframe using javascript the name tag isn't set (even if you try to set it) why the post target will fail. The solution for IE7: stackoverflow.com/questions/2181385/… – mrD Mar 19 '11 at 7:14 2 This can be done with different sites? (CORS)? – Leandro Tupone Nov 19 '14 at 19:49 Is there a way to save the content of the output frame to a file (e.g., response from the server to which the form has been submitted) ? – ZeroGraviti Jul 20 '16 at 0:39 show 2 more comments up vote 19 down vote An iframe is used to embed another document inside a html page. If the form is to be submitted to an iframe within the form page, then it can be easily acheived using the target attribute of the tag. Set the target attribute of the form to the name of the 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> Advanced iframe target use This property can also be used to produce an ajax like experience, especially in cases like file upload, in which case where it becomes mandatory to submit the form, in order to upload the files The iframe can be set to a width and height of 0, and the form can be submitted with the target set to the iframe, and a loading dialog opened before submitting the form. So, it mocks a ajax control as the control still remains on the input form jsp, with the loading dialog open. 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> shareimprove this answer answered Jun 21 '12 at 4:46 kapil 546810 add a comment up vote 0 down vote This function creates a temporary form, then send data using 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 is the 'name' attr of the target iFrame, and data is a JS object : data={last_name:'Smith',first_name:'John'} |
|||||||
|
Так же в этом разделе:
|
|||||||
|
|||||||
|
|||||||
|
