将数据发布到彩盒 iframe？答案

【问题标题】：Posting data to a colorbox iframe?将数据发布到彩盒 iframe？
【发布时间】：2012-03-16 14:55:55
【问题描述】：

这是我正在使用的代码。从我看到的其他示例中，这应该有效，但事实并非如此。并且已经确定我使用的是最新的颜色框。

function updateFolderCate(ID,Type){
    $.colorbox({
        iframe:true,
        scrolling: false,
        innerWidth:'100',
        innerHeight:'100',
        href:"page.php",
        data:{LinkID:ID,itemType:Type},
        onClosed:function(){
            //Do something on close.
        }
    });
}

【问题讨论】：

它在彩盒网站上提到 - 用于通过 ajax 请求提交 GET 或 POST 值。 data 属性的行为与 jQuery 的 .load() 数据参数完全相同，因为 ColorBox 使用 .load() 进行 ajax 处理。所以我去了jquery站点，.load需要数据作为对象来假设post。如何使用颜色框做到这一点？

标签： jquery post iframe colorbox

【解决方案1】：

您将 iframe 设置为 true。这样做是打开一个颜色框，创建一个 iframe，并将 iframe 的 src 属性设置为 href 指定的位置。所以从逻辑上讲，这不能做 POST 请求。这可能会完成你想要的，但我不确定。

function updateFolderCate(ID,Type){
    $.colorbox({
        open: true,
        scrolling: false,
        innerWidth:'100',
        innerHeight:'100',
        href:"page.php",
        data:{LinkID:ID,itemType:Type},
        onClosed:function(){
            //Do something on close.
        }
    });
}

这与 iframe 方法的行为不同，您可能需要重新设计端点。如果您的端点不必只接收 POST 请求，那么请使用 earlonrails 的答案。

编辑：我在深入研究源代码后来到这里：Source

相关行是第 800 行和第 856 行。iframe 和 href 似乎不兼容，所以我检查了在 Firebug 中加载的元素，发现它是一个 iframe，其 src 属性设置为 href 变量。

【讨论】：

谢谢埃里克！我测试了这段代码，它就像一个魅力！我不想通过 URL 传递 var 并使用 GET。

【解决方案2】：

它确实说： ".load( url [, data] [, complete(responseText, textStatus, XMLHttpRequest)] ) url 包含请求发送到的 URL 的字符串。 data 随请求发送到服务器的映射或字符串。"

你确实有一个 href 对象，但我认为在这种情况下它们不会一起使用。要使用 .load 或在这种情况下使用数据，我认为您需要指定一个 url。我认为这两种方法中的任何一种都可能奏效。

   function updateFolderCate(ID,Type){
        $.colorbox({
            iframe:true,
            scrolling: false,
            innerWidth:'100',
            innerHeight:'100',
            href:"page.php?LinkID=" + ID + "&itemType=" + Type,
            // or data : { "page.php", { LinkID:ID,itemType:Type } } 
            onClosed:function(){
                //Do something on close.
            }
        });
    }

http://www.codingforums.com/showthread.php?t=158713

http://api.jquery.com/load/

【讨论】：

【解决方案3】：

您可以在 iframe 中打开一个空白页面，该页面从首页获取数据并自行发布，如下所示：

var postData = window.top.getDataToPost()
$.post(postUrl,postData)

在打开颜色框的页面上，创建一个函数来提供值

function getDataToPost() {
   return { param1 = value1 }
}

【讨论】：

【解决方案4】：

我通过将颜色框导航到 about:blank 解决了这个问题，然后在 onComplete 回调中呈现一个带有隐藏字段的表单，该表单与 POST 数据一起提交。为此目的完美工作。

function createFormInputsFromObject(data, prefix) {
  prefix = prefix || '';
  var inputs = '';

  jQuery.each(data, function(name, value){
    if (prefix !== '') name = prefix + '[' + name + ']';
    if (Array.isArray(value) || value instanceof Object) {
      inputs += createFormInputsFromObject(value, name);
    }
    else {
      inputs += jQuery('<input>').attr({type: 'hidden', name: name, value: value}).prop('outerHTML');
    }
  });

  return inputs;
}

function showPdf(url, postData) {
  jQuery.colorbox({
    iframe: true,
    href: 'about:blank',
    width: '90%',
    height: '90%',
    onComplete: function() {
      var iframe = jQuery('#cboxLoadedContent iframe');
      var form = jQuery('<form>').attr({action: url, method: 'POST', target: iframe.attr('name')});
      if (!jQuery.isEmptyObject(postData)) {
        jQuery(createFormInputsFromObject(postData)).appendTo(form);
      }
      form.appendTo(iframe)
          .submit()
          .remove();
    }
  });
}


showPdf('/source/url', {sitName: 'sitka', items: [2, 4, 5, 6], extended: {i1: [10, 20], i2: {a: 0, b:1}}});

【讨论】：

【解决方案5】：

在您的示例代码中，data 是一个对象。在这种情况下，它是由对象字面量语法创建的。

到底发生了什么？

您在哪些浏览器（包括版本号）中试用过？
你使用的是什么 jQuery 版本？
控制台中是否出现任何错误？
您是否查看过 Firebug（或其他开发人员工具/Fiddler 等）的网络选项卡中的请求，以查看请求中的确切内容（例如请求方法）和服务器的响应？
您是否直接使用jQuery.load() 尝试过请求，看看会发生什么？

【讨论】：