利用javascript替换iframe的内容

Author : lovecicy

最近碰到了一个iframe的问题,又是在IE8下。

情况是这样的,我需要在iframe中显示一封邮件的preview页面,这个页面需要前台把用户输入的邮件内容通过ajax传到后台,拿到后台生成的html文件以后,将返回的html写入到preview区域显示。因为用户输入的内容可能很长,所以没有办法使用get方法直接将拼接的url放到iframe的src属性下,只能使用post方法返回html内容再插入iframe中,iframe的宽高设为固定值。

本来使用的代码是这样的:

$(window.frames[frameName].document).contents().find(‘html’).html(iframeHtml);

其中的iframeHtml是后台返回的一个完整的网页,包含<!DOCTYPE>,<head> 和<body>,执行完这段代码后,在chrome和firefox下都是正常的,但是在IE8下会有问题,要么preview区域什么内容都没有,要么就是内容太多的时候iframe的滚动条不会出现。但是在web developer tool中查看,iframeHtml确实已经插入iframe下了,但是<!DOCTYPE>部分被注释掉了。

在网上搜了很多,最后在stackoverflow发现了解决方法,下面是改进后的代码:

var doc = document.getElementById(iframeID).contentWindow.document;

doc.open();

doc.write(iframeHtml);

doc.close();

这样就可以再IE8下work了,chrome和firefox下亲测可用。

关于contentWindow和contentDocument:

IE8以前(包括IE8兼容模式)不支持contentDocument,需要使用contentWindow。所以更保险的写法应该是这样的:

var doc = document.getElementById(iframeID);

doc = (doc.contentDocument)?doc.contentDocument :doc.contentWindow.document;

参考:

http://stackoverflow.com/questions/5784638/replace-entire-content-of-iframe/13638249#13638249

http://www.w3schools.com/jsref/prop_frame_contentdocument.asp

standard
  1. luckygirl - 2012 年 11 月 30 日 2:34 下午

    Good!还有这么一个方法呀
    document.getElementById(iframeID).contentWindow.document

    回复
    • lovecicy - 2012 年 11 月 30 日 3:18 下午

      好像open(),close()和write()方法才是重点吧。

      回复

Have your say