Jak publikujesz dane w ramce iframe?
Jak publikujesz dane w ramce iframe?
Odpowiedzi:
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.
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.
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>
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'}
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;
}