Question

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

HTML：

<!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>

档案dynamic.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());
});

Answer 1

使用onload事件在第一个if条件下加载jquery时触发函数。在一个函数中包装需要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/

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

}

如何动态地将JavaScript添加到HTML并正确加载？

2 个答案: