[javascript] JS 파일에 jQuery를 추가하는 방법

Program / 글쓴이

테이블 정렬과 관련된 코드가 있습니다. 코드는 대부분의 페이지에서 일반적이므로 코드가있는 JS 파일을 만들고 싶습니다.이 코드를 사용하는 모든 페이지는 거기에서 참조 할 수 있습니다.

문제는 : jQuery 및 테이블 정렬 플러그인을 해당 .js 파일에 어떻게 추가합니까?

나는 이와 같은 것을 시도했다 :

document.writeln('<script src="/javascripts/jquery.js" type="text/javascript"></script>');
document.writeln('<script type="text/javascript" src="/javascripts/jquery.tablesorter.js"></script>');

그러나 이것은 작동하지 않는 것 같습니다.

가장 좋은 방법은 무엇입니까?

답변

var script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.4.1.min.js';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);

답변

다른 JS 파일의 jQuery 코드를 포함하려면 다음과 같은 트릭을 수행해야합니다.

내 HTML 파일에 다음이 있습니다.

<script src="jquery-1.6.1.js"></script>
<script src="my_jquery.js"></script>

다음을 사용하여 별도의 my_jquery.js 파일을 만들었습니다.

$(document).ready(function() {
  $('a').click(function(event) {
    event.preventDefault();
    $(this).hide("slow");
  });
});

답변

아래 코드를 사용하여 JS 파일에서 jQuery를로드 할 수 있습니다. 또한 작동하고 자체 호출 기능을 사용하는 jQuery JSFiddle을 추가했습니다.

// Anonymous "self-invoking" function
(function() {
    var startingTime = new Date().getTime();
    // Load the script
    var script = document.createElement("SCRIPT");
    script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js';
    script.type = 'text/javascript';
    document.getElementsByTagName("head")[0].appendChild(script);

    // Poll for jQuery to come into existance
    var checkReady = function(callback) {
        if (window.jQuery) {
            callback(jQuery);
        }
        else {
            window.setTimeout(function() { checkReady(callback); }, 20);
        }
    };

    // Start polling...
    checkReady(function($) {
        $(function() {
            var endingTime = new Date().getTime();
            var tookTime = endingTime - startingTime;
            window.alert("jQuery is loaded, after " + tookTime + " milliseconds!");
        });
    });
})();

스 니펫 확장

다른 옵션 : -Require.JS를 시도 할 수도 있습니다 모듈 로더 인 를 .

답변

/* Adding the script tag to the head as suggested before */

    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = "http://code.jquery.com/jquery-2.2.1.min.js";

    // Then bind the event to the callback function.
    // There are several events for cross browser compatibility.
    script.onreadystatechange = handler;
    script.onload = handler;

    // Fire the loading
    head.appendChild(script);

    function handler(){
       console.log('jquery added :)');
    }

답변

프로젝트에서 js 파일에 대한 참조를 추가하려는 경우 참조 태그를 사용하여 직접 추가 할 수도 있습니다 .Visual Studio IDE에서는 외부 파일을 솔루션 탐색기에서 현재 파일로 끌어서 놓아 자동으로 처리됩니다 ( 마크 업 파일, .js 및 .css 파일에서도 작동합니다.)

/// <reference path="jquery-2.0.3.js" />

답변

문제는 </script>스크립트 내에서 스크립트 태그를 끝내는 중입니다. 이 시도:

document.writeln('<script src="/javascripts/jquery.js" type="text/javascript"></sc'+'ript>');
document.writeln('<script type="text/javascript" src="/javascripts/jquery.tablesorter.js"></sc'+'ript>');

답변

다음은 다른 포럼에서 제안 된 솔루션의 조합으로 채택한 솔루션입니다.

이 방법으로 하나의 js 파일에서 css 파일과 다른 js 파일을 모두 참조 할 수 있으므로 다음 번에는 한 곳에서만 변경할 수 있습니다. 궁금한 점이 있으면 알려주세요.

나는 다음을 수행했다.

  1. jQueryIncluder.js라는 이름으로 js를 만들었습니다.

  2. 이 파일에서 다음 코드를 선언하고 실행했습니다.

    function getVirtualDirectory() {
  var vDir = document.location.pathname.split('/');
  return '/' + vDir[1] + '/';
}

function include_jQueryFilesToPage() {
  var siteAddress = location.protocol + '//' + document.location.hostname + getVirtualDirectory();
  var jqCSSFilePath =  siteAddress + 'includes/jQueryCSS/ehrgreen-theme/jquery-ui-1.8.2.custom.css';
  var jqCoreFilePath = siteAddress + 'includes/jquery-1.4.1.min.js';
  var jqUIFilePath =   siteAddress + 'includes/jquery-ui-1.8.2.custom.min.js';
  var head  = document.getElementsByTagName('head')[0];

  // jQuery CSS jnclude
  var jqCSS = 'cssIDJQ';  // you could encode the css path itself to generate id.
  if (!document.getElementById(jqCSS)) {
    var link  = document.createElement('link');
    link.id  = jqCSS;
    link.rel  = 'stylesheet';
    link.type = 'text/css';
    link.href = jqCSSFilePath;
    link.media = 'all';
    head.appendChild(link);
  }

  // Core jQuery include
  var jqc = "coreFileRefIDJQ";
  if (!document.getElementById(jqc))
    document.write('<scr' + 'ipt type="text/javascript" id="' + jqc + '" src="' + jqCoreFilePath + '"></scr' + 'ipt>');

  // jQueryUI include
  var jqUI = "uiFileRefIDJQ";
  if (!document.getElementById(jqUI))
    document.write('<scr' + 'ipt type="text/javascript" id="' + jqUI + '" src="' + jqUIFilePath + '"></scr' + 'ipt>');
}

include_jQueryFilesToPage();

  3. 내 .Net 프로젝트의 다른 js 또는 xsl 파일에서 위의 jQueryIncluder.js 파일을 다음과 같이 참조했습니다.

    <script type="text/javascript" src="~/includes/jQueryIncluder.js"></script>

내 노력에 감사드립니다.

감사