如何将javascript动态添加到HTML并正确加载？答案

【问题标题】：How to add javascript dynamically to HTML and load it correctly?如何将javascript动态添加到HTML并正确加载？
【发布时间】：2013-02-09 05:26:58
【问题描述】：

我正在尝试这个：如果 jQuery 不存在，动态添加 jQuery 并使用警报对其进行测试。但这不起作用，¿我做错了什么？

HMTL：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">               
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml" id="crishk">

<head>
</head>

<body>
    Welcome to Javascript Loader</a>
    <div id="alertme">Alert me!</div>
<script type="text/javascript" language="javascript" src="dynamic.js"></script>
</body>

</html>

文件动态.js

if (typeof jQuery == 'undefined') {
    alert('You need to install jQuery to proceed.!');

    var oHead = document.getElementsByTagName('head').item(0);
    var oScript = document.createElement("script");
    oScript.type = "text/javascript";
    oScript.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js";
    oHead.appendChild(oScript);

} else {
    alert('jQuery is present...');
}
$(document).ready(function () {
    alert($('#alertme').html());
});

【问题讨论】：

但是你应该在你的 html 中加载 jQuery。用户不需要加载它。 . .
为什么要动态添加JQuery？
在调用$(document).ready(...)之前不会加载jquery API，因为$尚未定义。
这个方法是异步的 - ^ Mike 打败了我，+1
1. “动态加载 jquery” - 把它放到谷歌上（我想知道你自己没有这样做） 2. 你是如何得到完全损坏的代码的？你没有检查每个变量都有预期值吗？

标签： javascript jquery html json

【解决方案1】：

在第一个 if 条件下加载 jquery 时，使用 onload 事件触发函数。将所有其他需要 jquery 的函数包装在一个函数中，并将其称为 jquery 的 onload。

这对你有用。

if (typeof jQuery == 'undefined') {
      alert( 'You need to install jQuery to proceed.!');

      var oHead = document.getElementsByTagName('head').item(0);
      var oScript= document.createElement("script");
      oScript.type = "text/javascript";
      oScript.src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js";
      oHead.appendChild( oScript);
        oScript.onload=onload; //on load handler
}
else {
  alert( 'jQuery is present...' );
  onload();
}
function onload(){

alert( $('#alertme').html() );    
};

查看http://jsfiddle.net/WVtt9/

【讨论】：

如果代码在 onload() 内部，则此方法有效，但如果您将代码放在 onload 外部，则不起作用！ ..你不能在其他地方使用最新的代码...
另一种选择是将所有其他函数保存在一个文件中并动态加载它们。所以您的 jquery 将首先加载..

【解决方案2】：

class OutputManager {

    public $output;
    public $dom;
    private $matches;

    function __construct( &$output )
    {
        $this->output = $output;        
        $this->dom = new DOMDocument();
        $this->dom->loadHTML( $this->output );
        $this->dom->normalizeDocument();
        $this->matches = array();
    }

    /**
    * put your comment there...
    * 
    * @param mixed $attr
    * @param mixed $val
    */
    public function elementExists( $tagName, $attr=NULL, $attr_val=NULL )
    {                
        if (count( $this->matches[$tagName] ) == 0) {
            $this->matches[$tagName] = $this->dom->getElementsByTagName( $tagName );
        }

        if ($attr == NULL && $attr_val == NULL) {            
            return $this->matches->length > 0;
        }
        else
        if ($attr != NULL && $attr_val == NULL) {            
            foreach ($this->matches[$tagName] as $match) {
                if ($this->match->hasAttribute($attr))
                    return true;
            }
        }
        else
        if ($attr != NULL && $attr_val != NULL) {
            foreach ($this->matches[$tagName] as $match) {
                if (trim( $match->getAttribute($attr), "/" ) == trim( $attr_val, "/" ))
                    return true;
            }
        }
        return false;
    }

    public function addScript( $src, $at="head" )
    {
        if (!$this->elementExists( "script", "src", $src )) {        

            $result = $this->dom->getElementsByTagName($at);


            $new_script = $this->dom->createElement( "script" );
            $attribute_src = $this->dom->createAttribute( "src" );
            $attribute_src->value = $src;
            $new_script->appendChild( $attribute_src );

            $attribute_type = $this->dom->createAttribute( "type" );
            $attribute_type->value = "text/javascript";
            $new_script->appendChild( $attribute_type );



            $result->item(0)->appendChild( $new_script );

        }
    }

    public function addStylesheet( $href )
    {
        if (!$this->elementExists( "link", "href", $href )) {
            $result = $this->dom->getElementsByTagName($at);

            $new_stylesheet = $this->dom->createElement( "link" );
            $attribute_href = $this->dom->createAttribute( "href" );
            $attribute_href->value = $href;
            $new_stylesheet->appendChild( $attribute_href );

            $attribute_type = $this->dom->createAttribute( "type" );
            $attribute_type->value = "text/css";
            $new_stylesheet->appendChild( $attribute_type );

            $attribute_rel = $this->dom->createAttribute( "rel" );
            $attribute_rel->value = "stylesheet";
            $new_stylesheet->appendChild( $attribute_rel );

            $result->item(0)->appendChild( $new_stylesheet );
        }
    }

    /**
    * Returns the final output.
    * 
    */
    public function getOutput()
    {
        return $this->dom->saveHTML();
    }

    public function getStyles()
    {
        return $matches['link'];
    }

}

【讨论】：