夏日博客

A-A+

用jQuery创建iframe中name的几个问题

2016年01月07日 前端设计 暂无评论 阅读 5 views 次

用jQuery创建iframe中name是碰到了几个问题，这几个问题折腾了很久，后面找到一文章大家一起来看解决方法吧。

尼玛上次做Upload.js的时候就发现了，由于没有记笔记导致今天还在这个问题上辗转了15分钟。。。妈蛋。。。

起因是用iframe+form来做上传功能，创建一个form>input来插入到body里，（ps：最好别插在你上传按钮dom的旁边，因为可能会出现form里套form，然后。。。），让input[type=file]的元素超大点，然后让form的width,heigth于你上传按钮的一致，然后定位吧少年。。。

再创建个iframe,那么坑来了。。。

因为页面可能有多个这样的实例，你需要用guid来给每个实例打个标识，因为现在需要在提交form的时候提交到iframe里，从而模拟伟大的ajax... 那么form上的target要跟iframe的name相同。。。不要问为什么。。。本来是这么创建的,代码如下:

  1. $iframe = $('<iframe />').attr({  
  2.     id: key +'_iframe',  
  3.     name: key  
  4. }).appendTo($body);  

但发现在IE7中无效，给我生成的name居然不叫name了。。。如图：

然后这样在提交的时候老是新窗口打开。。。于是要改创建iframe的代码。。。

  1. $iframe = $('<iframe id="'+ key +'_iframe" name="'+ key +'" class="ui-upload-iframe"></iframe>').appendTo($body);  

然后bug解决。。。

这样用户点的时候就等于直接点的input[type=file]。。。然后你自己绑定嫦娥(change)的时候提交到iframe里... 然后自己解析iframe里的contents().body()搞定...

标签：

给我留言