将 Jquery 动态加载到 .js 页面中答案

【问题标题】：Dynamically load Jquery into .js page将 Jquery 动态加载到 .js 页面中
【发布时间】：2010-04-13 10:15:52
【问题描述】：

如果我在这里很简单，请原谅我，我想创建一个简单的小部件，人们可以从他们的网站访问 - 例如通过复制/粘贴类似的东西

<script language="javascript" src="test2.js"></script>
<div id="test"></div>

在他们网页的任何地方。 where 是通过 Jquery 和 test2.js 中/上的函数动态填充的。

如果 JQuery 实际上是在 test2.js 的页面上“打印”的，我可以这样做，但如果我尝试动态包含/调用 JQuery，我将无法让任何 JQuery 函数工作。如何通过 javascript 调用 JQuery，然后让它与页面上的函数一起使用？

并且/或者是否有一种简单的方法可以动态添加 div id="test"></div>？当然我可以 body.append 等，但这只会在页面底部添加。有没有办法 .append 在脚本包含的位置

<script language="javascript" src="test2.js"></script>

真的放了吗？

希望我说得通。

【问题讨论】：

标签： jquery dynamic load

【解决方案1】：

function loadjscssfile(filename, filetype) {
        if (filetype == "js") { //if filename is a external JavaScript file
            var fileref = document.createElement('script')
            fileref.setAttribute("type", "text/javascript")
            fileref.setAttribute("src", filename)
        }
        else if (filetype == "css") { //if filename is an external CSS file
            var fileref = document.createElement("link")
            fileref.setAttribute("rel", "stylesheet")
            fileref.setAttribute("type", "text/css")
            fileref.setAttribute("href", filename)
        }
        if (typeof fileref != "undefined")
            document.getElementsByTagName("head")[0].appendChild(fileref)
    }

    loadjscssfile("jquery-1.4.2.js", "js") //dynamically load and add this .js file

你的 jquery 代码现在应该放在页面底部，等待 jquery 库附加到头部

【讨论】：

【解决方案2】：

关于你的问题<div id="test"></div>是否可以在脚本的位置动态添加：

如果您在脚本中调用document.write，则此内容将插入到脚本之后的文档中。

例如：

<html>
<head></head>
<body>
   <div id="first">
       <div id="second">
           <script type="text/javascript">
               document.write('<h2>test</h2>');
           </script>
      </div>
   </div>
</body>
</html>

结果

<html>
<head></head>
<body>
   <div id="first">
       <div id="second">
           <script type="text/javascript">
               document.write('<h2>test</h2>');
           </script>
           <h2>test</h2>
      </div>
   </div>
</body>
</html>

【讨论】：