如何分離js函數？

<!-- 
    Copyright (c) 2008 Google Inc. 

    You are free to copy and use this sample. 
    License can be found here: http://code.google.com/apis/ajaxsearch/faq/#license 
--> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
</style> 
<script src="https://www.google.com/jsapi?key=ABQIAAAAeEJvEumzGBw8dvenGPw1bRTcyTBaKMmwi780-Sh78Ay3Pg36mBRsO3t_v4eega6kiiiRMl84WG-4eA"></script> 
<script type="text/javascript"> 
    google.load('search', '1'); 

    onload = function() { 
    google.search.Search.getBranding('branding'); 
    //google branding 
    var searchResultsContainer = document.getElementById('searchResults'); 

    var newsSearch = new google.search.NewsSearch(); 
    newsSearch.setSearchCompleteCallback(this, function() { 
     if (newsSearch.results && newsSearch.results.length > 0) { 
      searchResultsContainer.style.display = 'block'; 
      for (var i=0; i<newsSearch.results.length; i++) { 
       var wrapper = document.createElement('div'); 
       var node = newsSearch.results[i].html.cloneNode(true); 
       wrapper.className = 'gs-result'; 
       wrapper.appendChild(node); 
       searchResultsContainer.appendChild(wrapper); 
      } 
     } 
    },null); 

    newsSearch.execute("sport"); 
    //keyword 
} 
</script> 
</head> 

<body> 
<div> 
    <div id="branding" style="float:left;"></div> 
    <div id="searchResults"></div> 
</div> 
</body> 
</html>

嗨，我想做一個Google新聞搜索，上面的代碼運行良好。不過，我想分開一個js函數。我使用下面的代碼，但結果什麼也沒有顯示。如何正確修改它？如何分離js函數？

<!-- 
    Copyright (c) 2008 Google Inc. 

    You are free to copy and use this sample. 
    License can be found here: http://code.google.com/apis/ajaxsearch/faq/#license 
--> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
</style> 
<script src="https://www.google.com/jsapi?key=ABQIAAAAeEJvEumzGBw8dvenGPw1bRTcyTBaKMmwi780-Sh78Ay3Pg36mBRsO3t_v4eega6kiiiRMl84WG-4eA"></script> 
<script type="text/javascript"> 
    google.load('search', '1'); 
    function searchcomplete() { 
     var newsSearch = new google.search.NewsSearch(); 
     if (newsSearch.results && newsSearch.results.length > 0) { 
      searchResultsContainer.style.display = 'block'; 
      for (var i=0; i<newsSearch.results.length; i++) { 
       var wrapper = document.createElement('div'); 
       var node = newsSearch.results[i].html.cloneNode(true); 
       wrapper.className = 'gs-result'; 
       wrapper.appendChild(node); 
       searchResultsContainer.appendChild(wrapper); 
      } 
     } 
    }  
    onload = function() { 
    google.search.Search.getBranding('branding'); 
    //google branding 
    var searchResultsContainer = document.getElementById('searchResults'); 

    var newsSearch1 = new google.search.NewsSearch(); 
    newsSearch1.setSearchCompleteCallback(this, searchcomplete ,null); 

    newsSearch1.execute("sport"); 
    //keyword 
} 
</script> 
</head> 

<body> 
<div> 
    <div id="branding" style="float:left;"></div> 
    <div id="searchResults"></div> 
</div> 
</body> 
</html>

來源

2010-12-18 yuli chika

您是否嘗試過使用調試器，如[Firebug]（http://getfirebug.com）？你應該。 – 2010-12-18 16:47:18

@Matt Ball，在Firebug中，'

'在下面的代碼中爲空。 – 2010-12-18 17:09:25

我不知道爲什麼你試圖去做這種方式，但它的工作代碼：

... 
<script type="text/javascript"> 
    google.load('search', '1'); 

    var newsSearch, searchResultsContainer; 

    function searchcomplete() { 
//  var newsSearch = new google.search.NewsSearch(); 
     if (newsSearch.results && newsSearch.results.length > 0) { 
      searchResultsContainer.style.display = 'block'; 
      for (var i=0; i<newsSearch.results.length; i++) { 
       var wrapper = document.createElement('div'); 
       var node = newsSearch.results[i].html.cloneNode(true); 
       wrapper.className = 'gs-result'; 
       wrapper.appendChild(node); 
       searchResultsContainer.appendChild(wrapper); 
      } 
     } 
    } 

    onload = function() { 
     google.search.Search.getBranding('branding'); 
     //google branding 
     searchResultsContainer = document.getElementById('searchResults'); 

     newsSearch = new google.search.NewsSearch(); 
     newsSearch.setSearchCompleteCallback(this, searchcomplete ,null); 

     newsSearch.execute("sport"); 
     //keyword 
    } 
</script> 
...

你沒有定義新的變量newsSearch
您應該在全球範圍內定義newsSearch和。

快樂編碼:-)

來源

2010-12-18 17:13:55 Ehsan

這裏有幾個問題：

function searchcomplete() { 
    // you create a... uh new empty search here? 
    var newsSearch = new google.search.NewsSearch(); 
    ... 

     // searchResultsContainer is NOT defined in this scope 
     searchResultsContainer.style.display = 'block'; 
     ... 
} 

onload = function() { 
    // this defines searchResultsContainer in the scope of the onload callback, 
    // but NOT in the global scope 
    var searchResultsContainer = document.getElementById('searchResults'); 
    ... 

    // the first param is the thing that 'this' in the callback will refer to 
    // in this case it's the window but you need to change this in order 
    //to get access to the results 
    newsSearch1.setSearchCompleteCallback(this, searchcomplete ,null); 
    ... 
}

而且這裏有一個固定的版本：

function searchcomplete() { 

    // Huh, why this? See below... 
    if (this.results && this.results.length > 0) { 

     // get 'searchResultsContainer' here 
     var searchResultsContainer = document.getElementById('searchResults'); 
     searchResultsContainer.style.display = 'block'; 
     for (var i=0; i < this.results.length; i++) { 
      var wrapper = document.createElement('div'); 
      .... 
} 

window.onload = function() { 
    ... 

    // here we supply newsSearch itself as the 'this' so we can access 
    // its properties inside the callback 
    newsSearch.setSearchCompleteCallback(newsSearch, searchcomplete ,null); 
    ... 
}

您應該this讀了一下，作用域。

來源

2010-12-18 17:15:20

如何分離js函數？

回答

相關問題