在 HTML 中动态追加 Jquery

Appending Jquery in HTML dynamically

本文关键字：追加 Jquery 动态 HTML      更新时间：2023-09-26

我是jquery的新手。我正在尝试在java的HTML页面中附加Jquery。为了包含jquery.js文件，我编写了以下代码： 

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';
};

[编辑]

实际上，我正在制作一个Web代理，您可以在其中下载页面并使用自定义外观和字段为它们提供服务。这些页面不包含任何jquery文件，我也不能包含或编写HTML。我只能使用 java 等动态添加我的 Js。

下面是一些代码，演示如何动态加载脚本文件，以及如何延迟调用 $（document）.ready，直到加载该文件：

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

用于加载 jquery.min.js 文件的代码被 asycnhronious 调用。在您尝试执行 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（） 函数来计算此变量中的脚本。你也可以使用 jquery 的 getscript 函数在回调函数中加载第二个 javascript 文件

相关文章：