动态创建iframe在IE下的两个问题

表单提交到动态创建的iframe

问题描述

以下代码,一般用于在当前页 无刷新提交表单,其原理是把表单的target设为页面上某个iframe的id,使该iframe成为提交的目标,避免新开窗口或跳转。但这段代码在 IE 6、7下无效。

 

<form action="http://www.baidu.com/" method="post" target="testframe">
	<input type="submit" value="Submit" />
</form>
<script>
var iframe = document.createElement('iframe');
iframe.id = 'testframe';
iframe.name = 'testframe';
document.body.insertBefore(iframe, document.body.firstChild);
</script>

 

解决方案

innerHTML方式插入iframe,例如:

 

<script>
var div = document.createElement('div');
div.innerHTML = '<iframe id="testframe" name="testframe" />';
document.body.insertBefore(div, document.body.firstChild);
</script>

 

动态创建iframe的onload事件

问题描述

以下代码在页面中创建一个iframe,并给iframe绑定 onload事件回调,但此回调在 IE 6、7、8下均无效。

 

<script>
var iframe = document.createElement('iframe');
iframe.id = 'testframe';
iframe.name = 'testframe';
iframe.src = 'http://www.baidu.com/';
iframe.onload = function() { alert('onload'); };
document.body.insertBefore(iframe, document.body.firstChild);
</script>

 

解决方案

attachEvent接口绑定事件回调,例如:

 

<script>
var iframe = document.createElement('iframe');
iframe.id = 'testframe';
iframe.name = 'testframe';
iframe.src = 'http://www.baidu.com/';
var fn = function() { alert('onload'); };
if (iframe.attachEvent) {
	iframe.attachEvent('onload', fn);
} else {
	iframe.onload = fn;
}
document.body.insertBefore(iframe, document.body.firstChild);
</script>

您可能还对下面的文章感兴趣:

 

  1. ie下iframe输入框焦点丢失解决方案 [2012-09-20 13:53:30]
  2. 跨域修改iframe内的文字 [2012-02-05 15:32:23]
  3. Google+开发团队分享经验 [2011-12-18 22:24:10]
  4. iframe自适应高度代码 [2011-08-23 13:24:07]
  5. IFrame带来的Session问题 [2011-06-01 23:34:12]
  6. 三谈Iframe自适应高度 [2010-07-28 09:36:32]
  7. 跨域请求的iframe解决方案(2) [2010-07-27 23:29:57]
  8. 跨域请求的iframe解决方案(1) [2010-07-27 23:29:03]
  9. JS操作iframe里的dom [2010-07-23 00:08:26]
  10. 使用document.domain和iframe实现站内AJAX跨域 [2010-07-21 09:42:37]
  11. BO报表系统嵌入Iframe在firefox下的错误修改 [2010-06-01 21:56:50]
  12. iframe里src=”about:blank”的问题。 [2010-06-01 13:11:24]

Tagged: ,

Comments are closed.