Как добавить jQuery в файл JS

Question

У меня есть код, специфичный для сортировки таблиц. Поскольку код является общим на большинстве страниц, я хочу создать файл 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>');

но это, похоже, не работает.

Каков наилучший способ сделать это?

Answer 1

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

Answer 2

Если вы хотите включить код jQuery из другого файла JS, это должно сработать:

В моем 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");
  });
});

Answer 3

Вы можете использовать приведенный ниже код для загрузки jQuery в ваш файл JS. Я также добавил работающий 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 , который является загрузчиком модулей JS.

Answer 4

/* 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 :)');
    }

Answer 5

Если вы хотите добавить ссылку на любой файл js, скажем, из вашего проекта, вы также можете добавить его напрямую, используя тег reference , в Visual Studio IDE это обрабатывается автоматически путем перетаскивания внешний файл из обозревателя решений в текущий файл (это работает для файлов разметки, а также для файлов .js и .css)

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

Answer 6

невозможно импортировать файл js в другой файл js

Способ использования jquery внутри js:

импортировать js в html или любую другую страницу просмотра, внутри которой вы собираетесь включить js-файл

view.html

 <script src="<%=request.getContextPath()%>/js/jquery-1.11.3.js"></script>
 <script src="<%=request.getContextPath()%>/js/default.js"></script>

default.js

$('document').ready(function() {
    $('li#user').click(function() {
         $(this).addClass('selectedEmp');
    });
});

это определенно будет работать для вас

Answer 7

Вот решение, которое я принял в качестве комбинации некоторых предложенных решений на некоторых других форумах.

Таким образом, вы можете ссылаться как на css-файлы, так и на другие js-файлы в одном js-файле, поэтому в следующий раз вносите изменения только в одном месте. Пожалуйста, дайте мне знать, если у вас есть какие-либо вопросы по этому поводу.

Я сделал следующее:

1. Я создал js с именем jQueryIncluder.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. Я ссылался на указанный выше файл jQueryIncluder.js в другом файле js или xsl моего проекта .Net следующим образом:

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

Надеюсь, мои усилия оценят.

Спасибо

Answer 8

Проблема в том, что вы используете </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>');

Answer 9

Есть плагин для jquery, где вы можете просто включить нужные файлы в какой-то другой файл js, вот ссылка на него http://tobiasz123.wordpress.com/2007/08/01/include-script-inclusion-jquery-plugin/.

Также эта строка document.write записывает теги сценария в html, а не в ваш js-файл.

Так что я надеюсь, что это поможет вам, немного с вашей проблемой

Answer 10

Вы можете создать базу главных страниц без включенных файлов js и jquery. Поместите заполнитель содержимого в базу главных страниц в разделе заголовка, затем создайте вложенную главную страницу, которая наследуется от этой базы основных страниц. Теперь поместите ваши включения в asp: content на вложенной главной странице, наконец, создайте страницу содержимого из этой вложенной главной страницы

Пример:

//in master page base    

<%@  master language="C#" autoeventwireup="true" inherits="MasterPage" codebehind="MasterPage.master.cs" %>
<html>
<head id="Head1" runat="server">
    <asp:ContentPlaceHolder runat="server" ID="cphChildHead">
        <!-- Nested Master Page include Codes will sit Here -->
    </asp:ContentPlaceHolder>
</head>
<body>
    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
    </asp:ContentPlaceHolder>
    <!-- some code here -->
</body>
</html>

//in nested master page :
<%@  master language="C#" masterpagefile="~/MasterPage.master" autoeventwireup="true"
    codebehind="MasterPageLib.master.cs" inherits="sampleNameSpace" %>
<asp:Content ID="headcontent" ContentPlaceHolderID="cphChildHead" runat="server">
    <!-- includes will set here a nested master page -->
    <link href="../CSS/pwt-datepicker.css" rel="stylesheet" type="text/css" />

    <script src="../js/jquery-1.9.0.min.js" type="text/javascript"></script>

    <!-- other includes ;) -->
</asp:Content>
<asp:Content ID="bodyContent" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <asp:ContentPlaceHolder ID="cphChildBody" runat="server" EnableViewState="true">
        <!-- Content page code will sit Here -->
    </asp:ContentPlaceHolder>
</asp:Content>