【问题标题】:Target an iframe with a HTML Post with jQuery使用带有 jQ​​uery 的 HTML 帖子定位 iframe
【发布时间】:2009-06-16 21:15:31
【问题描述】:

如果我使用 jQuery 或 JavaScript 来发布帖子,我怎样才能使其定位到 iframe 而不是当前页面?

jQuery.post( 
    url, 
    [data], 
    [callback], 
    [type] 
) 

这是 jQuery 帖子的格式,似乎没有任何地方可以像 <form> 标签中那样指定目标。

有什么想法吗?

【问题讨论】:

    标签: javascript jquery ajax iframe


    【解决方案1】:

    您可以通过常规形式执行此操作:

    <form action="targetpage.php" method="post" target="iframename" id="formid">
       <input type="hidden" name="foo" value="bar" />
    </form>
    

    然后您可以使用 jQuery 提交表单:

    $("#formid").submit();
    

    【讨论】:

    • 无法使用表单执行此操作,我在 .net 上,您不能在表单中包含表单
    • 你可以使用你的主表单。使用 jquery 临时更改操作、目标等的值,然后在之后恢复它们。
    • ASP.NET MVC 允许多种形式。另外,我认为如果您使用 jQuery 动态呈现表单然后提交该表单 ASP.NET 不会窒息。
    • 这个过程可以在.html页面上完成吗?
    • Matt,您可以通过 iframe 将 html 表单调用到您的 .net 页面中。
    【解决方案2】:

    也许您错过了 AJAX 请求的要点 - 为什么要尝试指定异步请求的“目标”?这是没有意义的,因为 AJAX 的全部意义在于来自服务器的请求被发送回 Javascript,无需重新加载页面或 HTML 目标。

    如果您想将请求的结果加载到 iframe 上,您可以这样做:

    $.post('myurl', function(data) {
        $('#myframe').html(data);
    }, 'html');
    

    【讨论】:

    • 我并不真正关心 ajax。我想要的只是将帖子从外部提交到 iframe,而无需用户单击提交按钮。我无法使用 src 将它们传递到 iframe 中,因为它不是它想要的查询字符串参数。
      标签允许我做我想做的事,但是我在 .net 上,所以所有内容都包含在一个表单标签中,我无法使用 target 属性为自己创建一个新的表单标签。出于某种原因,当我使用您提供的代码时,什么都没有被调用。我试过替换 #("#myframe").html(data);带有警报(“成功”);没有运气。
    【解决方案3】:

    您可以通过动态创建表单并将其附加到正文来解决 no-form-allowed-within-a-form 问题。所以你会做这样的事情:

    $().ready(function() {
        $('body').append('<form 
           action="url" 
           method="post" 
           target="iframename" 
           id="myspecialform">
             <input type="hidden" name="parameter" value="value" />
           </form>');
    });
    

    这会在包含页面上所有其他内容的主表单之外创建您的 iframe 更新表单。然后按照 Josh 的建议将其命名为:$('#myspecialform').submit();

    【讨论】:

      【解决方案4】:

      这是我在 javascript 中使用纯 html 的方法:

      var form=$("<form/>").attr({
          method: "post",
          action: "iframe.php",
          target: "list_frame"
      });
      form.append($("<input/>").attr({name:"field1",value:0}));
      form.append($("<input/>").attr({name:"field2",value:1}));
      form.append($("<input/>").attr({name:"field3",value:2}));
      form.append($("<input/>").attr({name:"field4",value:3}));
      form.append($("<input/>").attr({name:"field5",value:4}));
      $("body").append(form);
      form.submit();
      

      【讨论】:

      • 如果不想使用'target'属性,表单可以直接进入iframe:$('iframe#list_frame').contents().find('body') .append(form);在 FF 和 Chrome 中为我工作
      【解决方案5】:

      我知道这个问题很老,但这是我在 ASP.Net (C#) 上使用 jQuery 的方法。

      //Create the form in a jQuery object
      $("<form action='/FormPostTo.aspx' method='post' target='nameofframe'></form>")
          //Get the value from the asp textbox with the ID txtBox1 and POST it as b1
          .append($("<input type='hidden' name='b1' />").attr('value',$('#<%= txtBox1.ClientID %>').val()))
          //Get the value from the asp textbox with the ID txtBox2 and POST it as b2
          .append($("<input type='hidden' name='b2' />").attr('value',$('#<%= txtBox2.ClientID %>').val()))
          //Add the form to the body tag
          .appendTo('body')
          //Submit the form which posts the variables into the iframe
          .submit()
          //Remove the form from the DOM (so subsequent requests won't keep expanding the DOM)
          .remove();
      

      快速说明:我是这样输入标签的,而不是将它们连接起来,以防文本框的值中有引号 (')。如果你把它连接进去,它会弄乱 HTML 并且无法正确解析。

      此外,这会在使用后从 DOM 中删除表单,因此如果您多次发布到 iFrame,您就不会用表单元素填充 DOM。

      您可以做的一个小改动是,如果表单元素不存在则创建它,然后如果它已经存在则仅通过 ID 引用它并重用它。

      【讨论】:

        【解决方案6】:

        当我需要通过一个理想地使用 AJAX / jQuery 的表单将数据提交到远程页面时,这是我为解决在 asp.net 页面上的表单中包含表单的问题所做的。

        1. 我创建了变量来捕获 asp.net 表单名称、目标、 动作、方法等。

        2. 我在表格中保存了该信息 这些变量,然后使用 jQuery 更改表单本身来做 我需要它来做什么。

        3. 然后我通过 AJAX 发布了表单(因为我需要一个表单来动态发布到单独的页面,所以另一个 页面可以获取信息)。

        4. 最后,我把 asp.net 表单改回来了 以使页面的其余部分可以正常工作。

        这似乎解决了我对类似解决方案的需求。

        【讨论】:

          【解决方案7】:

          您错过了 AJAX 的重点。如果您想将内容发布到 iframe,您可以通过一个简单的表单、通过 JavaScript 或通常的方式发布:提交按钮。

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2011-02-13
            • 2011-05-16
            • 1970-01-01
            • 2014-06-26
            • 1970-01-01
            • 1970-01-01
            相关资源
            最近更新 更多