2012-07-02 3 views
0

Я новичок в jquery. Я пытаюсь добавить JQuery на HTML-странице в java. Чтобы включить jquery.js файл я написал следующий код:Добавление JQuery в HTML динамически

scriptTag += "var script = document.createElement('script');" + 
"script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'; " + 
"script.type = 'text/javascript'; " + 
"document.getElementsByTagName('head')[0].appendChild(script);" + 

, а затем я приложенном следующий JS + Jquery код вместе с ним

"var script2 = document.createElement('script'); window.onload = function() {" + 
"$(document).ready(function() {" + 
"$(\"#identity\").hide();});};" + 
"script2.type = 'text/javascript'; " + 
"document.getElementsByTagName('head')[0].appendChild(script2);"; 

Так в основном я пытаюсь написать это:

var script = document.createElement('script'); 
script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'; 
script.type = 'text/javascript'; 
document.getElementsByTagName('head')[0].appendChild(script); 
var script2 = document.createElement('script'); 
window.onload = function() { 
    $(document).ready(function() { 
     $("#identity").hide(); 
    }); 
    }; 
script2.type = 'text/javascript'; 
document.getElementsByTagName('head')[0].appendChild(script2); 

Что я хочу сделать, так это то, что я хочу свою функцию после загрузки окна. Так или иначе, запись $(document).ready(function() { сама по себе не работает. Я получаю ошибку, что $ не определен (похоже, что jquery.js еще не готов).

Чтобы избежать этой проблемы, я использовал window.onload = function() {. Но теперь я получаю ошибку: $(document).ready is not a function. Я действительно запутался здесь, как написать эту вещь. Это правильный подход? Любая помощь/руководство высоко ценятся.

[Редактировать]

Пожалуйста, обратите внимание, что следующий код (без JQuery) работает отлично:

window.onload = function() { 
document.getElementById('identity').style.visibility='hidden'; 
}; 

[Редактировать]

На самом деле я делаю веб-прокси, где я загружаю страницу и обслуживаю ее с помощью пользовательского вида и поля. Страницы не содержат никаких jquery-файлов, и я не могу включить или написать HTML. Я могу только добавить мой Js динамически с помощью Java и т.д.

+1

Это не так, как работает загрузка скриптов; вам нужно посмотреть на '' $ .getScript() '] (http://api.jquery.com/jQuery.getScript/) в jQuery и поместить его в файл для включения по URL-адресу. Добавление скриптов в Javascript является немного деликатным, и jQuery не делает его более легким. –

+0

'script2' пуст – Alexander

+0

@Alexander: Нет, это не так. Не могли бы вы указать код? –

ответ

1

Вот код, который показывает, как загрузить файл сценария динамически, а также задержать призвание $ (документ) .ready, пока не будет загружен этот файл:

http://jqfaq.com/how-to-load-java-script-files-dynamically/

+0

Я думаю, что в этом примере предполагается, что файл jquery.js уже включен в страницу.Но в моем случае он не включен. Я могу включить его только динамически, сначала загрузив страницу на сервер, а затем подав ее. –

+0

Итак, в моем случае я добавляю первый файл jquery.js. –

1

Код, используемый для загрузки файла jquery.min.js, называется asycnhroniously. Вероятно, этот файл не был загружен в тот момент, когда вы пытаетесь выполнить функцию jquery. Поэтому вы должны убедиться, что файл загружен с помощью функции обратного вызова.

В следующей ссылке вы можете найти пример о том, как это: http://blog.logiclabz.com/javascript/dynamically-loading-javascript-file-with-callback-event-handlers.aspx

Также здесь есть рабочий пример:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>index</title> 
    <script type="text/javascript"> 

     function loadScript(sScriptSrc, callbackfunction) { 
      //gets document head element 
      var oHead = document.getElementsByTagName('head')[0]; 
      if (oHead) { 
       //creates a new script tag 
       var oScript = document.createElement('script'); 

       //adds src and type attribute to script tag 
       oScript.setAttribute('src', sScriptSrc); 
       oScript.setAttribute('type', 'text/javascript'); 

       //calling a function after the js is loaded (IE) 
       var loadFunction = function() { 
        if (this.readyState == 'complete' || this.readyState == 'loaded') { 
         callbackfunction(); 
        } 
       }; 
       oScript.onreadystatechange = loadFunction; 

       //calling a function after the js is loaded (Firefox) 
       oScript.onload = callbackfunction; 

       //append the script tag to document head element 
       oHead.appendChild(oScript); 
      } 
     } 

     var SuccessCallback = function() { 
      $("#identity").hide(); 
     } 

     window.onload = function() { 

      loadScript('http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js', SuccessCallback) 

     }; 
    </script> 
</head> 
<body> 

    <span id="identity"> This text will be hidden after SuccessCallback </span> 

</body> 

Вы должны использовать этот код в scriptTag а затем вы можете использовать функцию eval() для оценки скрипта в этой переменной. Также вы можете загрузить второй файл javascript в функцию обратного вызова, используя функцию дескриптора jquery

Смежные вопросы