异步/Ajax 加载 Kindeditor 失败

问题描述

使用 jquery 的 load 方法加载页面时，被加载页面的Kindeditor 控件显示失败。

原因

Kindeditor 代码片段

function _ready(fn) {
	if (_readyFinished) {
		fn(KindEditor);
		return;
	}
	var loaded = false;
	function readyFunc() { //初始化方法
			if (!loaded) {
			loaded = true;
			fn(KindEditor);
			_readyFinished = true;
		}
	}
	function ieReadyFunc() {
		if (!loaded) {
			try {
				document.documentElement.doScroll('left');
			} catch(e) {
				setTimeout(ieReadyFunc,100);
				return;
			}
			readyFunc();
		}
	}
	function ieReadyStateFunc() {
		if (document.readyState === 'complete') {
			readyFunc();
		}
	}
	if (document.addEventListener) {
		_bind(document,'DOMContentLoaded',readyFunc); //将初始化方法 bind 在 documet 对象上
	} else if (document.attachEvent) {
		_bind(document,'readystatechange',ieReadyStateFunc); <span style="font-family: Arial,Helvetica,sans-serif;">//将初始化方法 bind 在 window 对象上</span>
		var toplevel = false;
		try {
			toplevel = window.frameElement == null;
		} catch(e) {}
		if (document.documentElement.doScroll && toplevel) {
			ieReadyFunc();
		}
	}
	_bind(window,'load',readyFunc);
}

查看上面代码发现 Kindeditor 控件的初始化方法是 bind 在页面中的 window 和 document 对象的 onload 事件上。

所以使用普通方式请求含有Kindeditor 控件的页面，当页面加载时会触发 window 和document 的 onload 事件，也就初始化了Kindeditor 控件

而使用 ajax 方式加载含有Kindeditor 控件的页面，是不会触发onload 事件的。

解决方案

经过上面的分析发现Kindeditor 控件这所以不显示是因为没有触发window 和document 的 onload 事件。

所以只要在加载完含有Kindeditor 控件的页面后手动触发一次 onload 事件即可。

        //chorme,firefox
        var event = document.createEvent('HTMLEvents'); 
        event.initEvent("load",true,true);   
        window.dispatchEvent(event);   
        //ie
        if(document.createEventObject){
	      	var event = document.createEventObject();
	        window.fireEvent('onload',event);
        }