如何將JavaScript動態添加到HTML並正確加載它？

我想這樣做：如果jQuery不存在，請添加jQuery dinamically並使用alert來測試它。但這不起作用，「我做錯了什麼？如何將JavaScript動態添加到HTML並正確加載它？

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>

文件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()); 
});

來源

2013-02-09 CRISHK Corporation

但是，你應該在你的HTML載入的jQuery。用戶不需要加載它。。。 – 2013-02-09 05:29:42

爲什麼要動態添加JQuery？ – 2013-02-09 05:29:47

在調用'$（document）.ready（...）'之前，jquery API的負載不會發生，因爲'$'還沒有被定義。 – 2013-02-09 05:30:13

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

}

來源

2013-02-18 07:22:36

使用onload事件時，在第一，如果條件裝載jQuery的火功能。將需要jquery的所有其他函數封裝在一個函數中，並將其稱爲onload的jquery。

這將爲你工作。

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/

來源

2013-02-09 05:41:22

如果代碼在onload（）內，但是如果你把代碼放在onload上，這就行不通了！ ..你不能在其他地方使用最新的代碼... – 2013-02-09 08:05:33

比只有選項才能包含jQuery總是.. – 2013-02-09 10:29:13

另一種選擇是保持所有其他功能在一個文件中，並動態加載它們..所以你的jQuery將首先加載.. – 2013-02-09 10:35:57

如何將JavaScript動態添加到HTML並正確加載它？

回答

相關問題