iframe 写入文档的问题

最新推荐文章于 2022-03-14 17:32:45 发布

iteye_12132

最新推荐文章于 2022-03-14 17:32:45 发布

阅读量416

点赞数

分类专栏： JavaScript

JavaScript 专栏收录该内容

117 篇文章

订阅专栏

本文介绍了一个基于niceEditor的富文本编辑器初始化过程，包括iframe元素的创建与配置、文档设计模式的启用及样式设置等关键技术点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里使用了niceEditor 的代码片段：


init : function() { 
        ... ... 
        // 创建一个iframe元素
        this.elmFrame = new bkElement('iframe').setAttributes({'src' : '', 'frameBorder' : 0, 'allowTransparency' : 'true', 'scrolling' : 'no'}).setStyle({height: '100px', width: '100%'}).addClass('frame').appendTo(this.elm);

        if(this.copyElm) { this.elmFrame.setStyle({width : (this.elm.offsetWidth-4)+'px'}); }

        ... ...

        //由于IE6和部分浏览器，无法正常读取新建的iframe元素，我们这里使用了setTimeout来延迟触发动作。
        // 50ms是个大概，基本能保证读取到文档。
        setTimeout(this.initFrame.closure(this),50);
    },
initFrame : function() {
        var fd = $BK(this.elmFrame.contentWindow.document);

        //开启文档设计模式
        fd.designMode = "on";       
        fd.open();
        var css = this.ne.options.externalCSS;
        fd.write('<html><head>'+((css) ? '<link href="'+css+'" rel="stylesheet" type="text/css" />' : '')+'</head><body id="nicEditContent" style="margin: 0 !important; background-color: transparent !important;">'+this.initialContent+'</body></html>');
        fd.close();
        this.frameDoc = fd;

        this.frameWin = $BK(this.elmFrame.contentWindow);
        this.frameContent = $BK(this.frameWin.document.body).setStyle(this.savedStyles);
        this.instanceDoc = this.frameWin.document.defaultView;

        //更新文档高度
        this.heightUpdate();

        //注册事件
        this.frameDoc.addEvent('mousedown', this.selected.closureListener(this))
            .addEvent('keyup',this.heightUpdate.closureListener(this))
            .addEvent('keydown',this.keyDown.closureListener(this))
            .addEvent('keyup',this.selected.closure(this));

        //最后触发编辑区域已准备的事件
        this.ne.fireEvent('add',this);
}