Como você postar em um iframe?
https://stackoverflow.com/questions/168455
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Como você postar dados para um iframe?
Solução
Depende do que você entende por "dados post". Você pode usar o atributo target="" HTML em uma tag <form />, para que ele pudesse ser tão simples como:
<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>
Se não é isso, ou você está atrás de algo mais complexo, por favor edite sua pergunta para incluir mais detalhes.
Há um bug conhecido com o Internet Explorer que só ocorre quando você está criando dinamicamente seus iframe, etc. usando Javascript (há um trabalho em torno aqui ), mas se você está usando a marcação HTML comum, você está bem. O atributo de destino e nomes de quadros não é algum truque ninja inteligente; apesar de ter sido preterido (e, portanto, não vai validar) em HTML 4 Strict ou XHTML 1 Strict, tem sido parte de HTML desde 3.2, é formalmente parte do HTML5, e funciona em praticamente todos os navegadores desde Netscape 3.
Tenho verificado este comportamento como trabalhar com XHTML 1 Strict, XHTML 1 de Transição, HTML 4 Strict e em "modo quirks" sem DOCTYPE especificado, e funciona em todos os casos usando Internet Explorer 7.0.5730.13. Meu caso de teste consiste em dois arquivos, usando ASP clássico no IIS 6; eles estão aqui reproduzida na íntegra, você pode verificar este comportamento para si mesmo.
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>
Eu estaria muito interessado em ouvir de qualquer navegador que não executar esses exemplos corretamente.
Outras dicas
Um iframe é usado para incorporar outro documento dentro de uma página html.
Se o formulário deve ser submetido a um iframe dentro da página de formulário, em seguida, ele pode ser facilmente conseguido usando o atributo de destino do tag.
Definir o atributo de destino do formulário para o nome da 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>
Avançado uso alvo iframe
Esta propriedade também pode ser usado para produzir um ajax como experiência, especialmente em casos como o upload de arquivos, caso em que, onde torna-se obrigatória para enviar o formulário, a fim de fazer o upload dos arquivos
O iframe pode ser definida como uma largura e uma altura de 0, e a forma pode ser apresentado com o conjunto de destino para o iframe, e uma janela de carregamento aberta antes de apresentar o formulário. Então, ele zomba de um controle ajax como o controle ainda permanece no jsp formulário de entrada, com o diálogo de carga aberta.
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>
Esta função cria uma forma temporária, os dados, em seguida, enviar usando 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();
}
alvo é o attr 'nome' do iFrame alvo, e de dados é um objecto JS:
data={last_name:'Smith',first_name:'John'}
Se você quiser entradas mudar em um iframe, em seguida, enviar o formulário a partir desse iframe, fazer isso
...
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();
}
...
Normalmente, você só pode fazer isso se a página no iframe é da mesma origem, mas você pode começar Chrome em um modo de depuração para desconsiderar a mesma política de origem e testar isso em qualquer página.
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;
}
