Jak publikować w ramce iframe?

266

Jak publikujesz dane w ramce iframe?

post iframe Murtaza Mandvi
źródło

Odpowiedzi:

407

Zależy, co rozumiesz przez „dane postu”. Możesz użyć target=""atrybutu HTML w <form />tagu, aby był on tak prosty, jak:

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

Jeśli to nie to, lub szukasz czegoś bardziej złożonego, edytuj pytanie, aby podać więcej szczegółów.

Znany jest błąd w programie Internet Explorer, który występuje tylko wtedy, gdy dynamicznie tworzysz swoje iframe itp. Za pomocą Javascript (jest tu obejście ), ale jeśli używasz zwykłego znacznika HTML, nic ci nie jest. Atrybut docelowy i nazwy ramek nie są jakimś sprytnym hackiem ninja; chociaż był przestarzały (i dlatego nie sprawdza się poprawności) w HTML 4 Strict lub XHTML 1 Strict, jest częścią HTML od 3.2, formalnie jest częścią HTML5 i działa w niemal każdej przeglądarce od Netscape 3.

Zweryfikowałem to zachowanie jako działające z XHTML 1 Strict, XHTML 1 Transitional, HTML 4 Strict oraz w „trybie dziwactwa” bez określenia DOCTYPE i działa we wszystkich przypadkach za pomocą Internet Explorera 7.0.5730.13. Mój przypadek testowy składa się z dwóch plików, używając klasycznej ASP na IIS 6; są one tutaj odtworzone w całości, abyś mógł sam zweryfikować to zachowanie.

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>

Byłbym bardzo zainteresowany informacją o każdej przeglądarce, która nie uruchamia poprawnie tych przykładów.

Dylan Beattie
źródło
1
Jak wskazano poniżej, cel w formularzu może nie działać w IE7 - będziesz chciał to przetestować.
NexusRex
12
Problem z IE 7 polega na tym, że jeśli generujesz iframe za pomocą javascript, tag name nie jest ustawiony (nawet jeśli spróbujesz go ustawić), dlaczego cel docelowy nie powiedzie się. Rozwiązanie dla IE7: stackoverflow.com/questions/2181385/...
mrD
Czy istnieje sposób na zapisanie zawartości ramki wyjściowej do pliku (np. Odpowiedź z serwera, na który formularz został przesłany)?
ZeroGraviti,
@ZeroGraviti Nie jest całkiem jasne, co rozumiesz przez „zapisz do pliku”. Co możesz zrobić, to przesłać formularz do IFRAME i ustawić odpowiedź w nagłówku Content-Disposition, jak opisano w stackoverflow.com/questions/1012437/... - więc użytkownik kliknie „Prześlij”, wysyła do IFRAME przeglądarka odbiera odpowiedź i monituje użytkownika o zapisanie pliku na komputerze lokalnym. Czy o to ci chodzi?
Dylan Beattie
@DylanBeattie, pozwól mi wyjaśnić moją instrukcję użycia. Udało mi się wypełnić element iframe, który został ustawiony jako targetatrybut HTML <form>. Po opublikowaniu formularza i wyświetleniu treści w docelowym ramce iframe chcę umożliwić użytkownikowi zapisanie tej zawartości w pliku. O to chciałem zapytać. Daj mi znać, jeśli wymaga to większej przejrzystości.
ZeroGraviti
25

Element iframe służy do osadzania innego dokumentu na stronie HTML.

Jeśli formularz ma zostać przesłany do elementu iframe na stronie formularza, można go łatwo uzyskać za pomocą atrybutu target znacznika.

Ustaw atrybut docelowy formularza na nazwę znacznika 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>

Zaawansowane użycie docelowego
elementu iframe Ta właściwość może być również używana do generowania doświadczenia podobnego do ajax, szczególnie w przypadkach takich jak przesyłanie plików, w których przesłanie formularza staje się obowiązkowe w celu przesłania plików

Ramkę iframe można ustawić na szerokość i wysokość 0, a formularz można przesłać z elementem docelowym ustawionym na iframe, a okno dialogowe ładowania zostanie otwarte przed przesłaniem formularza. Wyśmiewa więc formant ajax, ponieważ formant nadal pozostaje w formularzu wejściowym jsp, przy otwartym oknie ładowania.

Przykład

<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
źródło
Dzięki, ważne jest, aby <iframe> było po </form>, jak napisałeś
Igor Fomenko
2

Ta funkcja tworzy tymczasowy formularz, a następnie wysyła dane za pomocą 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 to „nazwa” atrybutu docelowej ramki iFrame, a dane to obiekt JS:

data={last_name:'Smith',first_name:'John'}
Dr Fred
źródło
0

Jeśli chcesz zmienić dane wejściowe w ramce iframe, prześlij formularz z tej ramki iframe, zrób to

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

Zwykle możesz to zrobić tylko wtedy, gdy strona w ramce iframe pochodzi z tego samego źródła, ale możesz uruchomić Chrome w trybie debugowania, aby zignorować te same zasady pochodzenia i przetestować to na dowolnej stronie.

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
źródło