关于 HTML编辑器中ie无法获取 iframe.contentWindow.document.write('html...') 的dom节点问题

frankqnj 2008-11-30 05:30:51

不好意思. 我没有分.送新人..

想写自己的编辑才发现问题多多...
开始的时候我使用了一个真正的页面作为 iframe.src 引用...
这时.貌似ie是可以用类似 iframe.contentWindow.body.innerHTML 取到东西. 也就是说是可以获取到 dom节点的.
但是这种情况在 opera9.5下有点小问题.
我查了. 都说是 opera9.5 + 对 document.open() .close() 有些问题.. 我给opera写了单独的代码. 问题仍然出现. 即编辑区域居然在iframe外面..而iframe里面却有一个和iframe 等高的大大的 focus.... 鼠标点编辑区 . iframe边框会变成虚线输入文字. 会把iframe删除掉. 也就是他居然把iframe放到编辑区里去了
我的dom结构肯定没问题. 因为其他浏览器全部正常. 最后我无奈的发现我把 iframe.src 属性去掉 . 而完全采用打开新文档流的方式写入dom结构 .则 opera才变的正常了.....

刚要高兴. 才突然发现这样做带来了新的问题 .ie无法获取到iframe.contentWindow 的节点......... 也就无法获取 body中的数据部分了....
实在是很想不通到底该如何处理呢?

这是我的代码参考yahoo editor的模式.





 {//HtmlEditor target 预替换的 textarea 节点id

        function HtmlEditor(target) {

            if (!(target = document.getElementById(target))) return false;

            var iframe = document.createElement('iframe');

            this.textarea = target;

            this.iframe = iframe;

            var iframeTextContent = ''

            iframeTextContent += '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">'

            iframeTextContent += '<html xmlns="http://www.w3.org/1999/xhtml" >';

            iframeTextContent += '<head> <title>text edit area</title>';

            iframeTextContent += '<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />';

            iframeTextContent += '<link rel="stylesheet" type="text/css" href="../css/mxjia_config.css" /></head>';

            iframeTextContent += '<body style="padding:3px;margin:0px;font-size:12px;cursor:text;text-align:left;line-height:16px;">测试</body></html>';

            this.iframeTextContent = iframeTextContent;

        }





        HtmlEditor.prototype = {

            //获取TextArea对象

            getTextArea: function() {

                return this.textarea;

            },

            //获取iframe对象

            getIframe: function() {

                return this.iframe;

            },

            //获取iframe引用的子窗体对象

            getWin: function() {

                return this.iframe.contentWindow;

            },

            //获取iframe引用窗体对象的document对象

            getDoc: function() {

                return this.getWin().document;

            },

            //获取iframe应用窗体的body对象

            getBox: function() {

                return this.getDoc().body;

            },

            //开启document对象的 DesignModel

            openDocDesignMode: function() {

                try {                   

                        this.getDoc().open();

                        this.getDoc().write(this.iframeTextContent);

                        this.getDoc().close();

                        this.getDoc().designMode = 'on';

                }

                catch (e) {

                    setTimeout(arguments.callee, 10);

                }

            },

            //创建并初始化iframe对象

            init: function() {

                this.iframe.id = 'iframe_' + this.textarea.id || 'iframe_htmlEditor';

                this.iframe.className = this.textarea.className;

                mxjia.insertAfter(this.iframe, this.textarea);

                this.textarea.style.display = 'none';

                this.openDocDesignMode();

                alert(this.getDoc().body); //这里 在ie中 打印出 null 其他浏览器全部正常....

            }



        }

    }