代码之家 › 专栏 › 技术社区 › Alconja

IE中jQuery设置的iframe`name`属性的奇怪行为

iframe forms internet-explorer jquery

Alconja · 技术社区 · 15 年前

我正在做一个ajax风格的文件上传,将文件以表单形式发布到iframe,并注意到IE中出现了一些奇怪的行为(似乎在6&8). 基本上在IE中,表单没有 target iframe将正确显示,以便响应显示在新窗口中(而不是iframe中)。您可以使用以下最小的HTML/JS集重现问题:

<html>
<head>
  <script src="http://code.jquery.com/jquery-1.3.2.js"></script>
  <script>
    $(document).ready(function(){
      var frameName = "myFrame";
      var $iframe = $("<iframe src=\"about:blank\" />")
              .attr("name", frameName)
              .appendTo("body");
      var $uploadForm = $("<form action=\"http://www.google.com/search\" />")
              .attr("target", frameName)
              .append("<input type=\"text\" name=\"q\" />")
              .append("<input type=\"submit\" />")
              .appendTo("body");
    });
  </script>
</head>
<body>
</body>
</html>

现在(在你发布答案之前),我做了一些调查(使用IE8的开发工具),结果显示 .attr("name", frameName) 实际上是将属性添加为 submitName="myFrame" 而不是简单地 name="myFrame" . 基于此,我通过将iframe创建代码更改为稍微糟糕的代码来解决问题:

var $iframe = $("<iframe src=\"about:blank\" name=\"" + frameName + "\" />")
        .appendTo("body");

进行此更改将根据需要将表单发布到iframe中。

我的问题是 :

.attr("name", ...) 按预期工作?
火车在哪里 submitName

4 回复 | 直到 15 年前

bobince 15 年前

IE中的一个bug(当然不是!)

很难相信,我知道,但我们在那里。

历史(*),设置 name 属性在IE中有很多问题。它往往只能部分保持。例如,在表单字段名上,它不会影响 form.elements[name] 像它应该的那样查找。这似乎是设置 名称 财产不可靠。

虽然jQuery试图解决类似这样的浏览器错误,但它并不能捕获所有错误,而且还没有完全解决问题的已知方法。

(*:在IE高达7中。如果您使用标准模式doctype在本机文档模式下运行IE8,并且如果需要使用与X-UA兼容的头/元,则不会出现这两个错误。)

这个 submitName 出现在开发工具中是一个有趣的IE bug的幕后一瞥,因为它根本没有出现在公开可见的DOM中。如果你看一个 <input> 元素或 <form> 谁的 名称 属性也已在创建后写入。

因此,似乎正在发生的事情是IE-up-7重定向了所有被称为 名称 子名称 ,即对于表单字段,更改该字段将作为表单提交的一部分生成的数据,但这不会更改实际值 名称

Patrick 13 年前

像这样创建元素

$("<iframe name='frameName' />")

帮我解决了这个问题

Felipe Nascimento 14 年前

这不仅仅是一个jQuery问题,当手动设置时,它也会发生。

如果使用setAttribute()方法进行设置,即使没有jQuery,也会在刚创建表单或iframe时执行相同的操作!

Tristan Warner-Smith 15 年前

你看过电影吗 markup creation improvements 在jQuery1.4中?

$('<iframe />',
{
   name: frameName,
   src: 'about:blank'
}).appendTo("body");

推荐文章

Hala · 有没有什么方法可以将CSS属性设置为其他不兼容浏览器的属性的备用项?

2 年前

Error 1004 · 使用VBA从HTML中提取信息

6 年前

myroslav · IE11中Angular 4应用程序崩溃

6 年前

L Y E S - C H I O U K H Dumitru Boaghi · 在IE9/Angular 5/TypeScript上使用FormData,无需Ajax或jQuery

6 年前

Dhananjay C · Internet Explorer-表格上的CSS框阴影不适用于IE浏览器

6 年前

jacob · 当操作url为跨原点时,Microsoft浏览器不会将表单发布到iframe

6 年前

Athar K · 工具提示悬停上的过渡在IE上不起作用,在Google Chrome上效果很好

6 年前

adrien54 · 使用BlendColor过滤器的IE上的透明度问题

6 年前

Kathryn Crawford · ul元素上的伪元素在IE11中不起作用

6 年前

sankar · IE不显示abbr标记的边框底部

6 年前