7. 특정 경로에 있는 파일(HTML,CSS,JS) 읽어서 화면에 출력하는 기능

 

불러오기 전

 

 

 

불러 온 후

 

 

 

 

방법1.

 

XMLHttpRequest를 이용하는 방법(ActiveX)

$(document).ready(function() {
	drawImageContainer();
	
	$("#btnPrintHTML").trigger("click");
});

function startRequest() {
	createXMLHttpRequest();
	
	var queryString = "uploadFile/sample.html";
	// http://localhost:8080/biz/700_FileMngSys/result.txt 404
	
	xmlHttp.onreadystatechange = handleStateChange;
	xmlHttp.open("GET", queryString, true);
	xmlHttp.send(null);
}

function createXMLHttpRequest() {
	if (window.ActiveXObject) {
		xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	} 
	else if (window.XMLHttpRequest) {
		xmlHttp = new XMLHttpRequest();                
	}
}

보안상 취약점이 발생 할 수 있으므로 실전에서 쓰기 어려울 수 있다.(서버<->클라이언트 간에 파일경로, 파일명을 간섭)

 

 

 

 

방법2.

 

jQuery get 또는 load 사용.

 

get은 가져온 후 데이터를 따로 가공 할 필요가 있을때 주로 사용하고

load는 바로 html 속성에 보여줄 때 사용하기 적합하다.

따라서 이 경우에는 load를 사용하는게 바람직하나 본인의 경우에는 script와 html이 섞여있어서 평범하게 load를 통한 호출은 사용할 수 없었다.

// 소스보기 버튼 클릭
function fn_printHtml(e) {
	
	e.preventDefault();
	
	var v = autoCache();
	
	// HTML RSS
	var queryString = $("#depth_container").text();
	var queryStringReg = (queryString).replace(/\s/gi,"");
	var queryStringPlus = g_webRoot_https + "/html/" + queryString;
	queryStringPlus += v;
	
	console.log("[fn_printHtml]" + queryStringPlus);
	
	if (queryStringReg!="") { 
		$.get(queryStringPlus, function(data, txtStatus, jqxhr) {
			$("#container1").css("display", "block");
			
			document.getElementById("printHTML").innerHTML=data;
		})
		.done(function() {
			console.log("success");
		})
		.fail(function() {
			alert("fail");
			window.location.reload(true);
		});
	
	} else {
		alert("fail");
		return false;
	}

	// HTML관리 페이지의 최신파일 다운로드 받기 기능을 위한 변수 설정
	//g_selectDepthToFileDownload = g_selectDepthval;
	
	// 이미지파일의 썸네일을 화면에 출력하는 기능
	//$("#getImageFilelist").trigger("click");
}

 

본인은 script와 html이 섞여있는 파일(html,css,js)을 불러오기 때문에 이를 해결하기위해 구글링 및 스택오버플로를 오래 헤맸는데 결국 원하는 답을 찾지 못했고, 고민끝에 순수 js로 구현하여 해결하였다.

document.getElementById("printHTML").innerHTML=data;

해당 코드를 이용한다면,  script와 html이 섞여있어도 읽어 올 수 있다.

 

jQuery를 이용하여 html 속성을 특정하여 화면에 출력하는 방법도 존재한다(예를들면 script부분 따로, body부분 따로 header부분 따로 호출하는 셈). 이 경우에는 시간을 들여서 가공 할 필요가 있다.

또 이 경우에는 파일의 특정 부분을 불러오기 때문에. 수정 후 다시 저장하려면 다시한번 시간을 들여야 한다.

 

 

 

화면캡처

위쪽 : 1번방법

아랫쪽 : 2번방법

 

 

		<div>
			<input type="button" id="btnPrintHTML" value="result" onClick="startRequest();" style="visibility:hidden" />
			<!-- <input type="button" id="btnPrintHTML" value="result" onClick="startRequest();" /> -->
			<br>
			<textarea id="printHTML" style="margin: 0px; width: 600px; height: 300px;">printHTML</textarea>
			<br>
			<br>
			<button onclick="fn_printHtml(event)">방법2 이미지출력</button>
			<br>
			<textarea id="printHTML2" style="margin: 0px; width: 600px; height: 300px;">printHTML2</textarea>
		</div>

( 파일첨부 : https://drsggg.tistory.com/374 )

 

 

 

 

 

또 주의할 점으로 : (cache처리 문제)

화면을 출력해줄때, 서버에 저장된 파일(html, css, js, 그외 각종 image file)들과 클라이언트에 캐싱된 파일이 달라서 새로고침 할 때마다 화면이 바뀔 수 있다.

html이 렌더링 될 때 캐시처리를 해주도록 수정해주자. 파일 뒤에 ?v=1 등을 붙여주면 된다.

 

 

참고 : https://drsggg.tistory.com/372

7-1. 캐시처리 v=1