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

标签: JavaScript | 发表时间:2014-04-16 06:40 | 作者:Heero's Blog
出处:http://www.blogread.cn/it/

标签:   iframe

表单提交到动态创建的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]

相关 [iframe ie 问题] 推荐:

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

- - IT技术博客大学习
标签:   iframe. 表单提交到动态创建的iframe. 以下代码,一般用于在当前页 无刷新提交表单,其原理是把表单的target设为页面上某个iframe的id,使该iframe成为提交的目标,避免新开窗口或跳转. 但这段代码在 IE 6、7下无效. 以 innerHTML方式插入iframe,例如:.

IE中Image .onload方法问题

- 红茶 - WEB前端开发
因为IE会缓存图片,第2次加载的图片,不是从服务器上传过来的,而是从缓冲区里加载的. 先写onload方法,再指定这张图片的URL,这样就正常了. 所以,不是IE没有触发onload事件,而是因为加载缓冲区的速度太快,以至于没有运行到img.onload的时候,onload事件已经触发了.

关于IE、火狐等浏览器兼容问题的总结

- - 博客园_首页
   今天整理系统,发现系统很多页面,只有在IE6下显示正常,其它的都不正常,很是奇怪. 所以上网找了一些关于浏览器兼容的问题和解决办法,在此我觉得大牛们总结的比较精彩,分享给网友们. 以下两种方法几乎能解决现今所有兼容.. 1, !important (不是很推荐,用下面的一种感觉最安全). 随着IE7对!important的支持, !important 方法现在只针对IE6的兼容.(注意写法.记得该声明位置需要提前.).

iframe子父页面调用

- - CSDN博客Web前端推荐文章
1、iframe子页面调用 父页面js函数. 子页面调用父页面函数只需要写上window.praent就可以了. 子页面取父页面中的标签中的值,比如该标签的id为“test”,则:. 但是我在chrome浏览器下却发现此方法无效了. 查了半天才了解,在chrome 5+中,window.parent无法在file://协议中运行,但是发布了之后http://协议下是可以运行的.

JavaScript Iframe 自动适应

- - ITeye博客
场景:Iframe嵌入flash,希望flash能随着页面的resize而resize. 首先导入JQuery框架,并设置iframe的scrolling=“auto”,这样的话可以自动的出现滚动条. 然后添加window的resize事件.  这样的话,每次浏览器resize的话,都会对iframe重新设置height,从而得到iframe resize的效果.

iframe post提交数据

- - Web前端 - ITeye博客
对于iframe默认get提交 需要进行post数据的大量提交,给找到外国网站的简单例子如:
. 因为我项目用到的是 页面用的tab 样式(如何实现tab样式切换这里不做说明),嵌入的是三个页面iframe,需要在切换的时候更改target指定iframe名字,为了验证是否可行,只好试下,不然无别的办法.

绝对不能在低版本IE浏览器兼容性问题上妥协

- - IE浏览器中文网站
网站开发者需要花费大把时间精力来兼容 IE6/ IE7的时代已经过去了,目前的现状是低版本IE浏览器正在逐渐消失,根据 12月份最新的浏览器市场份额统计数据显示,在全球范围内IE6和IE7加在一起仅有6.5%. 虽然在国内IE6和IE7仍然有相当一部分的占有率(20%左右),还有数字浏览器给他撑腰,但还是逃离不了被抛弃的命运.

三谈Iframe自适应高度

- xiao - Koubei UED Team
一是因为这真的是一个被说烂的话题,二是因为太师傅在n年前就写过这篇再谈iframe自适应高度. 之所以再提该问题,是因为之前项目中确实遇到了这个问题的方方面面,有必要总结一下. 希望对各位有帮助,有错误请指正. 同域、子页面高度不会动态增加. 这种情况最简单,直接通过脚本获取字页面实际高度,修改iframe元素高度即可.

js打印iframe里面的内容

- - JavaScript - Web前端 - ITeye博客
有时候系统中会有这样的需求,打印某些页面里的某部分内容,采用iframe的contentWindow.print()方法可以实现. . 当点击按钮时可以实现打印功能. 这样能实现打印功能,但是存在一个问题,就是如果这个iframe所在的这个页面还有其他的内容,而我们只需打印iframe里的内容,我试过了,如果用google那么他可以正常打印,但是IE,360却会打印这个页面的所有内容,这是因为当前也页面的焦点是在整个文档的,所以我们只需要将焦点设为iframe的window对象就可以了.

jq 解决iframe高度自适应。

- - Web前端 - ITeye博客
已有 0 人发表留言,猛击->> 这里<<-参与讨论. —软件人才免语言低担保 赴美带薪读研.