Bir iframe'e nasıl veri gönderirsiniz?
Bir iframe'e nasıl veri gönderirsiniz?
Yanıtlar:
"Verileri yayınla" ile ne demek istediğinize bağlı target=""Bir <form />etikette HTML özelliğini kullanabilirsiniz , böylece etiket şöyle basit olabilir:
<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>
Bu değilse veya daha karmaşık bir şeyin peşindeyseniz, lütfen daha fazla ayrıntı eklemek için sorunuzu düzenleyin.
Internet Explorer'da yalnızca Javascript kullanarak iframe'lerinizi vb. Dinamik olarak oluştururken ortaya çıkan bilinen bir hata var (burada bir çözüm var ), ancak normal HTML biçimlendirmesi kullanıyorsanız, sorun yok. Hedef özellik ve çerçeve adları bazı akıllı ninja kesmek değildir; HTML 4 Strict veya XHTML 1 Strict'de kullanımdan kaldırılmış (ve dolayısıyla doğrulanmayacak olsa da), 3.2'den beri HTML'nin bir parçası, resmi olarak HTML5'in bir parçası ve Netscape 3'ten bu yana hemen hemen her tarayıcıda çalışıyor.
Bu davranışı XHTML 1 Strict, XHTML 1 Transitional, HTML 4 Strict ve "quirks" modunda hiçbir DOCTYPE ile çalışma olarak doğruladım ve Internet Explorer 7.0.5730.13 kullanan tüm durumlarda çalışır. Test durumum, IIS 6'da klasik ASP kullanan iki dosyadan oluşur; burada tam olarak çoğaltılırlar, böylece bu davranışı kendiniz doğrulayabilirsiniz.
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>
Bu örnekleri doğru şekilde çalıştırmayan herhangi bir tarayıcıyı duymak isterim.
targetBir html özniteliği olarak ayarlanmış bir iframe doldurmayı başardık <form>. Form gönderildikten ve hedef iframe'deki içeriği görebildikten sonra, kullanıcıya bu içeriği bir dosyaya kaydetme seçeneği sunmak istiyorum. Sormak istediğim buydu. Bunun daha fazla netliğe ihtiyacı olup olmadığını bana bildirin.
Bir iframe, başka bir belgeyi html sayfasının içine gömmek için kullanılır.
Form, form sayfasındaki bir iframe'e gönderilecekse, etiketin hedef özelliği kullanılarak kolayca erişilebilir.
Formun target niteliğini iframe etiketinin adına ayarlayın.
<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>
Gelişmiş iframe hedef kullanımı
Bu özellik, özellikle dosya yükleme gibi durumlarda, dosyaları yüklemek için formu göndermenin zorunlu hale geldiği durumlarda ajax benzeri bir deneyim üretmek için de kullanılabilir.
İframe, 0 genişliğine ve yüksekliğine ayarlanabilir ve form, iframe'e ayarlanan hedefle birlikte gönderilebilir ve formu göndermeden önce bir yükleme iletişim kutusu açılabilir. Bu nedenle, yükleme iletişim kutusu açıkken, denetim hala giriş formu jsp üzerinde kaldığı için bir ajax denetimi alay eder.
xmaple
<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>
Bu işlev geçici bir form oluşturur, ardından jQuery kullanarak veri gönderir:
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, hedef iFrame'in 'name' yıpranma noktasıdır ve veriler bir JS nesnesidir:
data={last_name:'Smith',first_name:'John'}
Bir iframe'deki girişleri değiştirmek istiyorsanız formu o iframe'den gönderin, bunu yapın
...
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();
}
...
Normalde, bunu yalnızca iframe'deki sayfa aynı kaynaktan geliyorsa yapabilirsiniz, ancak aynı kaynak politikasını göz ardı etmek ve herhangi bir sayfada test etmek için Chrome'u bir hata ayıklama modunda başlatabilirsiniz.
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;
}