异步/Ajax 加载 Kindeditor 失败

最新推荐文章于 2021-08-06 13:56:51 发布

xiao_HEIx

最新推荐文章于 2021-08-06 13:56:51 发布

阅读量2.4k

点赞数

分类专栏： other 文章标签： Kindeditor

本文链接：https://blog.youkuaiyun.com/u011662659/article/details/49100631

版权

other 专栏收录该内容

1 篇文章

订阅专栏

当使用 jQuery 的 load 方法异步加载包含 Kindeditor 的页面时，Kindeditor 控件无法正常显示。问题源于Kindeditor 初始化需要在DOM加载完成后进行。解决办法是在成功回调中重新初始化Kindeditor。

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

问题描述

使用 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);
        }