Bagaimana cara mengirim ke iframe?

266

Bagaimana cara mengirim data ke iframe?

post iframe Murtaza Mandvi
sumber

Jawaban:

407

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.

Dylan Beattie
sumber
1
Seperti yang ditunjukkan di bawah ini, target pada formulir mungkin tidak berfungsi di IE7 — Anda ingin mengujinya.
NexusRex
12
Masalah dengan IE 7 adalah bahwa jika Anda menghasilkan iframe menggunakan javascript tag nama tidak diatur (bahkan jika Anda mencoba untuk mengaturnya) mengapa target posting akan gagal. Solusi untuk IE7: stackoverflow.com/questions/2181385/…
mrD
Apakah ada cara untuk menyimpan konten frame output ke file (mis., Respons dari server yang formulirnya telah diserahkan)?
ZeroGraviti
@ZeroGraviti Tidak terlalu jelas apa yang Anda maksud dengan "simpan ke file". Apa yang dapat Anda lakukan adalah mengirimkan formulir ke IFRAME, dan minta tanggapan mengatur tajuk Content-Disposition seperti yang dijelaskan dalam stackoverflow.com/questions/1012437/... - sehingga pengguna mengklik "kirim", ia mengirim ke IFRAME, Browser menerima respons dan meminta pengguna untuk menyimpan file ke mesin lokal mereka. Itukah yang Anda cari?
Dylan Beattie
@DylanBeattie, izinkan saya mengklarifikasi usecase saya. Saya telah dapat mengisi iframe yang telah ditetapkan sebagai 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.
ZeroGraviti
25

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>
kapil
sumber
Terima kasih, penting bahwa <iframe> harus setelah </form> seperti yang Anda tulis
Igor Fomenko
2

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'}
Dr Fred
sumber
0

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;
}
Dominique Fortin
sumber