js 파일을 동적으로 붙이고 떼기 (load & unload)

C# WebView(WebBrowser)를 이용해서 로컬 html, js 파일을 읽어서 화면을 표시하려고 하는데

실시간으로 값이 바뀌어야 하는 부분을 처리하기 위해 json 파일을 이용하기로 했다.

하지만 로컬 json 파일은 읽을 수 없어서 js 파일에 json 변수를 선언하는 방법을 사용했다.

참고 : http://bomdol.tistory.com/150

하지만 이렇게 하면 화면이 뜰 때에만 값을 읽을 수 있어서 js를 계속 새로 고침해야 하는데

동적으로 부르기만 하면 메모리 누수가 있을 것 같아서 해제하는 함수도 찾아서 적용했다.

여러 시간에 걸쳐서 실험한 건 아니지만 별다른 오류없이 작동하니 잘 될 거라 믿고 쓴다.

동적으로 js 파일 읽기 - 로컬 파일 가능

function loadJavascript(url, callback, charset) {
    var head= document.getElementsByTagName('head')[0];
    var script= document.createElement('script');
    script.type= 'text/javascript';
    if (charset != null) {
        script.charset = "euc-kr";
    }
    var loaded = false;
    script.onreadystatechange= function () {
        if (this.readyState == 'loaded' || this.readyState == 'complete') {
            if (loaded) {
                return;
            }
            loaded = true;
            callback();
        }
    }
    script.onload = function () {
        callback();
    }
    script.src = url;
    head.appendChild(script);
}

출처: http://javacan.tistory.com/entry/JavaScriptDynamicLoading

js 파일 해제하기

function removejscssfile(filename, filetype) {

      var targetelement = (filetype == "js") ? "script" : (filetype == "css") ? "link" : "none" //determine element type to create nodelist from

      var targetattr = (filetype == "js") ? "src" : (filetype == "css") ? "href" : "none" //determine corresponding attribute to test for

      var allsuspects = document.getElementsByTagName(targetelement)

      for (var i = allsuspects.length; i >= 0; i--) { //search backwards within nodelist for matching elements to remove

        if (allsuspects[i] && allsuspects[i].getAttribute(targetattr) != null && allsuspects[i].getAttribute(targetattr).indexOf(filename) != -1)

          allsuspects[i].parentNode.removeChild(allsuspects[i]) //remove element by calling parentNode.removeChild()

      }

    }

출처 : http://www.javascriptkit.com/javatutors/loadjavascriptcss2.shtml

적용 예

$(function () {

      setInterval(function () {

        removejscssfile('json.js','js')

        loadJavascript('json.js', function () { },'utf-8')

        $('#json_div').html(jsondata.success)

      }, 1000)

    })

jsondata.success는 json.js 파일에 선언되어 있다.

var jsondata = { "success": "true" }

이 값을 false, try 등으로 바꾸고 테스트한 결과 잘 반영되었다.