Як ви публікуєте повідомлення в 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, яка виникає лише тоді, коли ви динамічно створюєте свої рамки iframes тощо за допомогою 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, а відповідь встановити заголовок вмісту-диспозиції, як описано в stackoverflow.com/questions/1012437/… - так що користувач натискає "надіслати", він публікує в IFRAME, браузер отримує відповідь і пропонує користувачу зберегти файл на своїй локальній машині. Це те, що ти шукаєш?
Ділан Бітті

@DylanBeattie, дозвольте мені уточнити мою корисну скриньку. Мені вдалося заповнити iframe, встановлений як targetатрибут для html <form>. Після розміщення форми і я бачу вміст у цільовій рамці, я хочу надати користувачеві можливість зберегти цей вміст у файлі. Це я мав намір запитати. Дайте мені знати, чи потрібно це більш чітко.
ZeroGraviti

25

Iframe використовується для вбудовування іншого документа на сторінку html.

Якщо форма повинна бути подана в рамку на сторінці форми, її можна легко отримати за допомогою цільового атрибута тегу.

Встановіть цільовий атрибут форми на ім'я тега 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
Ця властивість може також використовуватися для створення досвіду, подібного до аякса, особливо у випадках, як завантаження файлів, і в тому випадку, коли стає обов'язковим подати форму, щоб завантажити файли

Рамка iframe може бути встановлена ​​на ширину та висоту 0, а форму можна надіслати з цільовим набором для iframe, а перед подачею форми відкрити діалогове вікно завантаження. Таким чином, він знущається над ajax керуванням, оскільки управління все ще залишається у формі введення jsp, при відкритому діалоговому вікні завантаження.

Приклад

<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 - attr 'name' цільового iFrame, а дані є об'єктом 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();
}
...

Як правило, ви можете це зробити лише в тому випадку, якщо сторінка в кадрі є тим самим походженням, але ви можете запустити 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;
}
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.