Bagaimana cara mengirim data ke iframe?
Bagaimana cara mengirim data ke iframe?
Jawaban:
Tergantung apa yang Anda maksud dengan "memposting data". Anda dapat menggunakan target=""atribut HTML pada <form />tag, sehingga bisa sesederhana:
<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>
Jika bukan itu, atau Anda mencari sesuatu yang lebih kompleks, harap edit pertanyaan Anda untuk memasukkan lebih detail.
Ada bug yang dikenal dengan Internet Explorer yang hanya terjadi ketika Anda secara dinamis membuat iframe Anda, dll. Menggunakan Javascript (ada pekerjaan di sini ), tetapi jika Anda menggunakan markup HTML biasa, Anda baik-baik saja. Atribut target dan nama-nama bingkai bukan beberapa hack ninja yang pintar; walaupun sudah usang (dan karenanya tidak akan divalidasi) dalam HTML 4 Strict atau XHTML 1 Strict, ini sudah menjadi bagian dari HTML sejak 3.2, ini secara formal bagian dari HTML5, dan ini berfungsi di hampir semua browser sejak Netscape 3.
Saya telah memverifikasi perilaku ini sebagai bekerja dengan XHTML 1 Ketat, XHTML 1 Transisi, HTML 4 Ketat dan dalam "mode quirks" tanpa DOCTYPE ditentukan, dan itu bekerja dalam semua kasus menggunakan Internet Explorer 7.0.5730.13. Kasing uji saya terdiri dari dua file, menggunakan ASP klasik pada IIS 6; mereka direproduksi di sini secara penuh sehingga Anda dapat memverifikasi perilaku ini untuk diri sendiri.
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>
Saya akan sangat tertarik mendengar browser apa pun yang tidak menjalankan contoh ini dengan benar.
targetatribut untuk html <form>. Setelah formulir diposting dan saya bisa melihat konten di iframe target, saya ingin memberikan opsi kepada pengguna untuk menyimpan konten ini ke file. Inilah yang ingin saya tanyakan. Beri tahu saya jika ini membutuhkan lebih banyak kejelasan.
Iframe digunakan untuk menyematkan dokumen lain di dalam halaman html.
Jika formulir akan dikirimkan ke iframe di dalam halaman formulir, maka itu dapat dengan mudah dicapai menggunakan atribut target dari tag.
Setel atribut target formulir ke nama tag iframe.
<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>
Penggunaan target iframe lanjutan
Properti ini juga dapat digunakan untuk menghasilkan pengalaman seperti ajax, terutama dalam kasus-kasus seperti unggah file, dalam hal ini menjadi keharusan untuk mengirimkan formulir, untuk mengunggah file
Iframe dapat diatur ke lebar dan tinggi 0, dan formulir dapat dikirimkan dengan target yang ditetapkan ke iframe, dan dialog pemuatan dibuka sebelum mengirimkan formulir. Jadi, itu mengolok-olok kontrol ajax karena kontrol masih tetap pada formulir input jsp, dengan dialog pemuatan terbuka.
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>
Fungsi ini membuat formulir sementara, lalu mengirim data menggunakan 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 adalah 'nama' attr dari target iFrame, dan data adalah objek JS:
data={last_name:'Smith',first_name:'John'}
Jika Anda ingin mengubah input dalam iframe lalu kirimkan formulir dari iframe itu, lakukan ini
...
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();
}
...
Biasanya, Anda hanya dapat melakukan ini jika halaman di iframe berasal dari asal yang sama, tetapi Anda dapat memulai Chrome dalam mode debug untuk mengabaikan kebijakan asal yang sama dan mengujinya di halaman mana pun.
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;
}