294

如何将数据发布到 iframe？

4

5 回答 5

438

取决于您所说的“发布数据”是什么意思。您可以在标签上使用 HTMLtarget=""属性<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 动态创建 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；它们在此处完整复制，因此您可以自己验证此行为。

默认的.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>

我很想听到任何不能正确运行这些示例的浏览器。

于 2008-10-03T19:28:18.953 回答
32

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

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

将表单的 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>
于 2012-06-21T04:46:15.857 回答
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'}
于 2018-05-20T19:10:17.760 回答
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;
}
于 2018-10-31T22:25:29.160 回答
0

您可以使用此代码，必须添加要传递的正确参数以及获取数据的 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();
于 2022-01-05T06:05:32.783 回答