如何将数据发布到iframe?
当前回答
如果您想更改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;
}
其他回答
这取决于你对“发布数据”的定义。你可以在<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有一个已知的bug，它只在使用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>
如果有浏览器不能正确运行这些示例，我将非常感兴趣。
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上，加载对话框打开。
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中的输入，然后从该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;
}
这个函数创建一个临时表单，然后使用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'}
你可以使用这段代码，将不得不添加适当的参数被传递，也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();
推荐文章
- application/json和application/x-www-form-urlencoded有什么区别?
- HTML5 iFrames的替代方案
- 从iframe访问父URL
- 使用curl POST multipart/form-data的正确方法是什么?
- 我如何调试一个HTTP POST在Chrome?
- 发送POST数据重定向与JavaScript/jQuery?
- 如何嵌入一个自动播放的YouTube视频在iframe?
- 如何在iframe和父站点之间进行通信?
- iframe, embed和object元素之间的区别
- 使iframe高度动态基于内容里面- JQUERY/Javascript
- 执行没有实体主体的HTTP POST被认为是不好的做法吗?
- 请求报头字段Access-Control-Allow-Headers被Access-Control-Allow-Headers不允许
- 如何使用NameValuePair使用POST添加参数到HttpURLConnection
- PHP重定向POST数据
- 如何使用jquery访问iFrame父页面?
