【发布时间】：2010-09-15 04:05:28
【问题描述】：
如何将数据发布到 iframe？
【问题讨论】：
【发布时间】：2010-09-15 04:05:28
【问题描述】：
取决于您所说的“发布数据”是什么意思。您可以在 <form /> 标记上使用 HTML target="" 属性，因此它可以很简单：
<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 等时出现（有一个 work-around here），但如果您使用的是普通 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>
我很想知道任何浏览器不能正确运行这些示例。
【讨论】：
-
正如下面所指出的，表单上的目标在 IE7 中可能不起作用——您需要对其进行测试。
-
IE 7 的问题在于，如果您使用 javascript 生成 iframe，则未设置名称标签（即使您尝试设置它）为什么发布目标会失败。 IE7的解决方案：stackoverflow.com/questions/2181385/…
-
有没有办法将输出框架的内容保存到文件中（例如，来自已提交表单的服务器的响应）？
-
@ZeroGraviti 不太清楚您所说的“保存到文件”是什么意思。您可以做的是将表单提交到 IFRAME，并让响应设置 Content-Disposition 标头，如stackoverflow.com/questions/1012437/… 中所述 - 因此用户单击“提交”，它发布到 IFRAME，浏览器接收响应并提示用户将文件保存到他们的本地计算机。这就是你所追求的吗？
-
@DylanBeattie，让我澄清一下我的用例。我已经能够填充已设置为 html
<form>的target属性的 iframe。表单发布后，我可以在目标 iframe 中看到内容，我想为用户提供一个选项，以将此内容保存到文件中。这就是我想问的。让我知道这是否需要更清楚。
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>
【讨论】：
-
谢谢，重要的是
-
注意：当谷歌爬虫检测到页面上设置为 0 高度/宽度的元素时，它会严重惩罚网站的 SERP 排名。如果有人决定使用这种 iframe 技术，建议明确指定 google 无法通过 robots.txt、页面的元机器人标记和 rel=nofollow 属性的引用页面链接来抓取表单页面。
此函数创建一个临时表单，然后使用 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 的 'name' attr，data 是一个 JS 对象：
data={last_name:'Smith',first_name:'John'}
【讨论】：
如果您想更改 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;
}
【讨论】：
您可以使用此代码，但必须添加要传递的正确参数以及获取数据的 api url。
var allParams = { xyz, abc }
var parentElm = document.getElementBy... // your own element where you want to create the iframe
// create an iframe
var addIframe = document.createElement('iframe');
addIframe.setAttribute('name', 'sample-iframe');
addIframe.style.height = height ? height : "360px";
addIframe.style.width = width ? width : "360px";
parentElm.appendChild(addIframe)
// make an post request
var form, input;
form = document.createElement("form");
form.action = 'example.com';
form.method = "post";
form.target = "sample-iframe";
Object.keys(allParams).forEach(function (elm) {
console.log('elm: ', elm, allParams[elm]);
input = document.createElement("input");
input.name = elm;
input.value = allParams[elm];
input.type = "hidden";
form.appendChild(input);
})
parentElm.appendChild(form);
form.submit();
【讨论】：