ajax + froalra (js 로드문제)
본문
(function() {
var isLoading = false;
var currentUrl = window.location.pathname;
var sidebarLoaded = false;
var sidebarCache = null;
if (typeof window.input === 'undefined') {
window.input = {};
}
function loadContent(url, isPopState) {
if (isLoading || currentUrl === url) return;
isLoading = true;
currentUrl = url;
$.ajax({
url: url,
type: 'GET',
cache: true,
success: function(response) {
var $html = $('<div>').html(response);
var $newContent = $html.find('#content');
if ($newContent.length) {
$('#content').html($newContent.html());
$html.find('script').each(function() {
var scriptSrc = $(this).attr('src');
if (scriptSrc && scriptSrc.indexOf('<') === -1) {
if (!$('script[src="' + scriptSrc + '"]').length) {
$.getScript(scriptSrc).done(function() {
checkAndInitializeFroalaEditor();
}).fail(function(jqxhr, settings, exception) {
console.log('Failed to load ' + scriptSrc);
});
}
} else {
var scriptContent = $(this).text();
if (scriptContent && scriptContent.indexOf('<') === -1) {
$.globalEval(scriptContent);
}
}
});
initializeContent();
if (!sidebarLoaded) {
reloadSidebar();
}
} else {
$('#content').html('<p>해당 콘텐츠가 존재하지 않습니다.</p>');
}
},
error: function(xhr, status, error) {
$('#content').html('<p>콘텐츠를 불러오는 중 오류가 발생했습니다.</p>');
},
complete: function() {
isLoading = false;
}
});
if (!isPopState) {
window.history.pushState(null, '', url);
}
}
function reloadSidebar() {
if ($('#sidebar').length) {
if (sidebarCache) {
$('#sidebar').html(sidebarCache);
} else {
$('#sidebar').load(location.href + ' #sidebar > *', function() {
sidebarCache = $('#sidebar').html();
sidebarLoaded = true;
});
}
}
}
function initializeContent() {
if (typeof viewImageResize === 'function') {
viewImageResize();
}
if (typeof initializeTheme === 'function') {
initializeTheme();
}
$(document).off('click', 'a.ajax-link').on('click', 'a.ajax-link', function(e) {
e.preventDefault();
var url = $(this).attr('href');
sidebarLoaded = false;
loadContent(url, false);
});
}
function checkAndInitializeFroalaEditor() {
if (typeof FroalaEditor !== "undefined" && $('#wr_content').length > 0) {
initializeFroalaEditor();
} else {
// 500ms 후 다시 체크
setTimeout(checkAndInitializeFroalaEditor, 500);
}
}
function initializeFroalaEditor() {
if (typeof FroalaEditor !== "undefined" && $('#wr_content').length > 0) {
new FroalaEditor('#wr_content', {
language: 'ko',
heightMin: 300,
});
} else {
console.error("FroalaEditor is not defined or element not found.");
}
}
function loadFroalaEditorScripts() {
// FroalaEditor CSS
var froalaCssPath = '/plugin/editor/froala_editor_4.2.0/css/froala_editor.pkgd.css';
if (!$('link[href="' + froalaCssPath + '"]').length) {
$('<link>', {
rel: 'stylesheet',
type: 'text/css',
href: froalaCssPath
}).appendTo('head');
}
// Froala custom CSS
var froalaCustomCssPath = '/plugin/editor/froala_editor_4.2.0/css/sir_custom.css';
if (!$('link[href="' + froalaCustomCssPath + '"]').length) {
$('<link>', {
rel: 'stylesheet',
type: 'text/css',
href: froalaCustomCssPath
}).appendTo('head');
}
// FroalaEditor JS
var froalaJsPath = '/plugin/editor/froala_editor_4.2.0/js/froala_editor.pkgd.min.js';
if (!$('script[src="' + froalaJsPath + '"]').length) {
$.getScript(froalaJsPath)
.done(function() {
// FroalaEditor 스크립트가 로드된 후 초기화
window.addEventListener('DOMContentLoaded', checkAndInitializeFroalaEditor);
window.addEventListener('load', checkAndInitializeFroalaEditor);
})
.fail(function() {
console.error("Failed to load FroalaEditor script.");
});
} else {
// FroalaEditor 스크립트가 이미 로드된 경우
window.addEventListener('DOMContentLoaded', checkAndInitializeFroalaEditor);
window.addEventListener('load', checkAndInitializeFroalaEditor);
}
}
$(document).ready(function() {
loadContent(window.location.pathname, true);
initializeContent();
loadFroalaEditorScripts();
$(window).on('popstate', function() {
loadContent(location.pathname, true);
});
});
})();
test / 1234
디자인소스 > 게시물을 클릭하면 댓글 에디터가 비정상 적으로 나오는 ㅜㅜ
ajax로 전체 페이지를 그냥 불러오는 방식인데 새로고침이나 직접 주소로 들어가면 오류가 없는데 이게 무슨 조화일까요 ㅜㅜ
아마도 js파일을 제대로 호출을 못해서 그런것 같은데 고수님들의 따끔한 조언을 부탁드립니다 ㅜ
진짜 ajax도 아니고 통째로 그냥 불러오는 방식인데도 쉽지가 않네요 ㅜㅜ
!-->답변 5
데이터를 로드 할 때 키 라이선스를 인식하지 못해서 발생하는 문제입니다.
키 값을 재로드 하지 마시고, 상단에 배치 하세요
그러니깐 다시 표현해서 script 자체를 재 로드 하지마시라는 뜻입니다.
"프로알라 사용자 + 댓글 에디터 + ajax 댓글 사용자입니다."
view.comment.skin.php 파일 상단에 로드 파일을 작성하시면 해결 될껍니다.
ㅜㅜ 질문을 전부 그냥 패스하고 링크를 가시는 군요 ㅜ
새로고침을 하면 그냥 정상인 상태인데 ajax로 링크로 이동하면 생기는 버그에 대한 질문입니다 흑흑
답변을 작성하시기 전에 로그인 해주세요.