Question

<!-- 
  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函数。我使用以下代码，但结果没有显示。如何正确修改？

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

Answer 1

这里有几个问题：

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上阅读一下并确定范围。

Answer 2

我不知道你为什么试图这样做，但这是工作代码：

...
<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和searchResultsContainer。

快乐编码： - ）

如何分离js功能？

2 个答案: