您如何发布到iframe？

Answers:

407

取决于“发布数据”的含义。您可以target=""在<form />标签上使用HTML 属性，因此可以很简单：

<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动态创建iframe等时才会发生（此处有一种变通方法），但是如果您使用普通的HTML标记，就可以了。目标属性和框架名称并不是聪明的忍者破解；尽管在HTML 4 Strict或XHTML 1 Strict中已弃用（因此将不进行验证），但自3.2以来它已成为HTML的一部分，正式成为HTML5的一部分，并且自Netscape 3起几乎可在所有浏览器中使用。

我已验证此行为可与XHTML 1 Strict，XHTML 1 Transitional，HTML 4 Strict一起使用，并且在未指定DOCTYPE的“怪异模式”下使用，并且在所有情况下都可使用Internet Explorer 7.0.5730.13正常工作。我的测试用例由两个文件组成，在IIS 6上使用经典的ASP；第二个文件由两个文件组成。它们已在此处完整复制，因此您可以自己验证此行为。

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>

我将非常有兴趣听到任何未正确运行这些示例的浏览器。

— 迪伦·比蒂
source
1
如下面所指出的，表单上的目标可能无法在IE7中使用-您将需要对其进行测试。
— NexusRex 2011年
12
IE 7的问题在于，如果您使用javascript生成iframe，则未设置名称标签（即使您尝试对其进行设置），因此发布目标也会失败。：IE7的解决方案stackoverflow.com/questions/2181385/...
— MRD
有没有一种方法可以将输出帧的内容保存到文件中（例如，来自已提交表单的服务器的响应）？
— ZeroGraviti
@ZeroGraviti还不清楚“保存到文件”的含义。您可以做的是将表单提交给IFRAME，并按照stackoverflow.com/questions/1012437/…中的说明，将响应设置为Content-Disposition标头-因此，用户单击“提交”，将其发布到IFRAME，浏览器收到响应，并提示用户将文件保存到本地计算机。那是你所追求的吗？
— Dylan Beattie
@DylanBeattie，让我澄清一下用例。我已经能够填充已设置为targethtml属性的iframe <form>。表单发布后，我可以在目标iframe中看到内容，我想为用户提供一个选项来将该内容保存到文件中。这就是我要问的。让我知道是否需要进一步说明。
— ZeroGraviti
25

iframe用于将另一个文档嵌入html页面。

如果要将表单提交到表单页面中的iframe，则可以使用标记的target属性轻松实现。

将表单的目标属性设置为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上，并且打开了加载对话框。

精品

<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>
— 卡皮尔
source
谢谢，重要的是您写的<iframe>必须在</ form>之后
— Igor Fomenko
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是目标iFrame的“名称”属性，data是JS对象：

data={last_name:'Smith',first_name:'John'}
— 弗雷德博士
source
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;
}
— 多米尼克·福汀
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.