Como você publica em um iframe?

266

Como você publica dados em um iframe?

post iframe

— Murtaza Mandvi
fonte

407

Depende do que você quer dizer com "postar dados". Você pode usar o target=""atributo HTML em uma <form />tag, para que seja tão simples quanto:

<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 for esse o caso, ou se você estiver buscando algo mais complexo, edite sua pergunta para incluir mais detalhes.

Existe um bug conhecido no Internet Explorer que ocorre apenas quando você cria dinamicamente seus iframes etc. usando Javascript (há uma solução alternativa aqui ), mas se você estiver usando a marcação HTML comum, estará bem. O atributo de destino e os nomes dos quadros não são um truque ninja inteligente; embora tenha sido descontinuado (e, portanto, não será validado) no HTML 4 Strict ou no XHTML 1 Strict, faz parte do HTML desde 3.2, formalmente parte do HTML5 e funciona em praticamente todos os navegadores desde o Netscape 3.

Eu verifiquei esse comportamento como trabalhando com XHTML 1 Strict, XHTML 1 Transitional, HTML 4 Strict e no "modo quirks" sem DOCTYPE especificado e funciona em todos os casos usando o Internet Explorer 7.0.5730.13. Meu caso de teste consiste em dois arquivos, usando o ASP clássico no IIS 6; eles são reproduzidos aqui na íntegra para que você possa verificar esse comportamento por 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 ficaria muito interessado em ouvir sobre qualquer navegador que não execute esses exemplos corretamente.

— Dylan Beattie
fonte

1

Como foi indicado abaixo, o destino no formulário pode não funcionar no IE7 - você deve testar isso.

— NexusRex

12

O problema com o IE 7 é que, se você gerar o iframe usando javascript, a tag name não está definida (mesmo se você tentar defini-la) por que o destino da postagem falhará. A solução para o IE7: stackoverflow.com/questions/2181385/…

— mrD 19/03/11

Existe uma maneira de salvar o conteúdo do quadro de saída em um arquivo (por exemplo, resposta do servidor ao qual o formulário foi enviado)?

— precisa

@ZeroGraviti Não está muito claro o que você quer dizer com "salvar em um arquivo". O que você pode fazer é enviar o formulário para um IFRAME e fazer com que a resposta defina um cabeçalho de Disposição de Conteúdo, conforme descrito em stackoverflow.com/questions/1012437/… - para que o usuário clique em "enviar", ele publique em um IFRAME, o O navegador recebe a resposta e solicita que o usuário salve o arquivo em sua máquina local. É isso que você procura?

— Dylan Beattie

@DylanBeattie, deixe-me esclarecer meu caso de uso. Consegui preencher um iframe que foi definido como o targetatributo de um html <form>. Depois que o formulário for publicado e eu puder ver o conteúdo no iframe de destino, desejo fornecer ao usuário uma opção para salvar esse conteúdo em um arquivo. Era isso que eu queria perguntar. Deixe-me saber se isso precisa de mais clareza.

— precisa

25

Um iframe é usado para incorporar outro documento dentro de uma página html.

Se o formulário tiver que ser enviado para um iframe na página do formulário, ele poderá ser facilmente obtido usando o atributo target da tag.

Defina o atributo de destino do formulário como 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>

Uso avançado do destino iframe
Essa propriedade também pode ser usada para produzir uma experiência semelhante ao ajax, especialmente em casos como upload de arquivo, caso em que se torna obrigatório o envio do formulário, a fim de fazer o upload dos arquivos

O iframe pode ser definido como largura e altura 0, e o formulário pode ser enviado com o destino definido para o iframe, e uma caixa de diálogo de carregamento é aberta antes de enviar o formulário. Portanto, ele zomba de um controle ajax, pois o controle ainda permanece no formulário de entrada jsp, com a caixa de diálogo de carregamento 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>

— Kapil
fonte

Obrigado, é importante que o <iframe> deva seguir o <form> como você escreveu

— Igor Fomenko

2

Essa função cria um formulário temporário e envia dados usando o 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 é o atributo 'name' do iFrame de destino e data é um objeto JS:

data={last_name:'Smith',first_name:'John'}

— Dr. Fred
fonte

0

Se você deseja alterar as entradas em um iframe, envie o formulário a partir desse iframe, faça 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 for da mesma origem, mas você pode iniciar o Chrome em um modo de depuração para desconsiderar a mesma política de origem e testá-la 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;
}

— Dominique Fortin
fonte