Как вы публикуете в iframe?

Ответы:

407

Зависит от того, что вы подразумеваете под «размещать данные». Вы можете использовать target=""атрибут HTML для <form />тега, поэтому он может быть таким простым:

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

Если это не так, или вы ищете что-то более сложное, пожалуйста, отредактируйте свой вопрос, чтобы включить более подробную информацию.

Существует известная ошибка с Internet Explorer , который происходит только тогда , когда вы динамически создавать свои фреймы и т.д. , используя Javascript (есть обходные здесь ), но если вы используете обычную HTML - разметку, вы хорошо. Целевой атрибут и имена фреймов не являются каким-то хитрым взломом ниндзя; хотя это было объявлено устаревшим (и поэтому не будет проверяться) в HTML 4 Strict или XHTML 1 Strict, оно является частью HTML с 3.2, формально является частью HTML5 и работает практически во всех браузерах, начиная с Netscape 3.

Я проверил это поведение при работе с XHTML 1 Strict, XHTML 1 Transitional, HTML 4 Strict и в «режиме причуд» без указания DOCTYPE, и оно работает во всех случаях с использованием Internet Explorer 7.0.5730.13. Мой тестовый пример состоит из двух файлов, использующих классический ASP на IIS 6; они воспроизведены здесь полностью, так что вы можете сами проверить это поведение.

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>

Мне было бы очень интересно услышать о любом браузере, который не запускает эти примеры правильно.

Дилан Битти
источник
1
Как было указано ниже, цель в форме может не работать в IE7 - вам нужно это проверить.
NexusRex
12
Проблема с IE 7 заключается в том, что если вы генерируете iframe с использованием javascript, тег имени не устанавливается (даже если вы пытаетесь установить его), почему цель публикации не будет выполнена. Решение для IE7: stackoverflow.com/questions/2181385/…
mrD
Есть ли способ сохранить содержимое кадра вывода в файл (например, ответ от сервера, на который была отправлена ​​форма)?
ZeroGraviti
@ZeroGraviti Не совсем понятно, что вы подразумеваете под «сохранить в файл». Что вы можете сделать, это отправить форму в IFRAME, и в ответе установить заголовок Content-Disposition, как описано в stackoverflow.com/questions/1012437/… - чтобы пользователь нажимал кнопку «submit», он отправлял сообщения в IFRAME, Браузер получает ответ и предлагает пользователю сохранить файл на локальном компьютере. Это то, что вы после?
Дилан Битти
@DylanBeattie, позвольте мне уточнить мой случай использования. Я был в состоянии заполнить iframe, который был установлен в качестве targetатрибута для HTML <form>. После того, как форма была опубликована, и я вижу содержимое в целевом iframe, я хочу предоставить пользователю возможность сохранить это содержимое в файл. Это то, что я хотел спросить. Дайте мне знать, если это нужно больше ясности.
ZeroGraviti
25

IFRAME используется для встраивания другого документа в HTML-страницу.

Если форма должна быть отправлена ​​в iframe на странице формы, ее можно легко получить с помощью целевого атрибута тега.

Задайте для целевого атрибута формы имя тега 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>

Расширенное использование целевого iframe
Это свойство также может быть использовано для создания ajax-подобного опыта, особенно в таких случаях, как выгрузка файлов, и в этом случае становится обязательным отправлять форму для выгрузки файлов.

Для iframe можно задать ширину и высоту 0, а форму можно отправить с целевым объектом, установленным в iframe, и открыть диалоговое окно загрузки перед отправкой формы. Таким образом, он макетирует элемент управления ajax, так как он все еще остается в форме ввода jsp, с открытым диалогом загрузки.

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>
Капил
источник
Спасибо, важно, чтобы <iframe> был после </ form>, как вы написали
Игорь Фоменко
2

Эта функция создает временную форму, а затем отправляет данные с помощью 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 - это имя name для целевого iFrame, а data - это объект JS:

data={last_name:'Smith',first_name:'John'}
Доктор фред
источник
0

Если вы хотите изменить входные данные в iframe, тогда отправьте форму из этого iframe, сделайте это

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

Обычно это можно сделать только в том случае, если страница в iframe имеет тот же источник, но вы можете запустить Chrome в режиме отладки, чтобы игнорировать ту же политику происхождения и проверить это на любой странице.

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;
}
Доминик Фортин
источник