在 Google 自定义搜索 (CSE) 上添加“下一个”和“上一个”链接答案

【问题标题】：Adding 'Next' and 'Previous' links on Google Custom Search (CSE)在 Google 自定义搜索 (CSE) 上添加“下一个”和“上一个”链接
【发布时间】：2013-01-19 14:42:06
【问题描述】：

是否可以在 Google 自定义搜索的页面结果中添加下一个和上一个链接？我找到了这个帖子How to show next/previous links in Google Custom Search Engine paging links，但代码是针对旧版 Google 自定义搜索的。

较新的版本只是给你一个像<gcse:searchresults-only></gcse:searchresults-only> 这样的标签，一切都由此生成。有任何想法吗？谢谢

这就是搜索结果被拉入的方式..

<script>
(function() {
    var cx = 'xxxxxx:xxxxx',
        gcse = document.createElement('script');

    gcse.type = 'text/javascript'; gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s);
})();
</script>

<gcse:searchresults-only></gcse:searchresults-only>

【问题讨论】：

第一步可能是添加一个 gname 属性到您的 searchresults-only 元素，以便您可以在 javascript 中访问它。 IE: 然后你可以通过 google.search.cse.element.getElement('pickaname') 访问 CSE
另外，我不会使用您发布的链接中的代码；它依赖于可能更改的未记录参数。我希望更好的方法是简单地生成您自己的分页并跟踪它们在您自己的哪个页面。您可以使用 searcher.gotoPage(page) 函数来更改页面。我唯一不确定的是如何从我的其他评论中提到的 CSE 元素中获取 searcher 对象，但您可以尝试 gsce_element.getWebSearcher() （其中 gsce_element 是 getElement 调用的结果）
最后，你不妨使用 HTML 风格的标签。参考：developers.google.com/custom-search/docs/…developers.google.com/custom-search/docs/element#html5 developers.google.com/web-search/docs/reference#_class_GSearch 就个人而言，我坚持使用 V1，直到 V2 的内容得到更好的记录为止。
重复stackoverflow.com/q/3302495/24267

标签： javascript search google-custom-search

【解决方案1】：

您可以使用 searcher.cursor.currentPageIndex 和 searcher.gotoPage() 所有这些包裹在 google.setOnLoadCallback 中

window.customSearchControl = customSearchControl;

$(function() {

    var link = $('<a />', {
        'html' : 'link',
        'href' : '#',
        'class' : 'general-button',
        'style' : 'margin-right:1em'
    });

    var searcher = window.customSearchControl.getWebSearcher();

    var prev = link.clone().click(function(e) {
        e.preventDefault();
        var topage = searcher.cursor.currentPageIndex - 1;
        if(topage < 1) {
            topage = 0;
        }
        searcher.gotoPage(topage);
        return false;
    }).html('&lt; prev');

    var next = link.clone().click(function(e) {
        e.preventDefault();
        var topage = searcher.cursor.currentPageIndex + 1;
        if(topage > searcher.cursor.pages.length) {
            topage = 10;
        }
        searcher.gotoPage(topage);
        return false;
    }).html('next &gt;');

    $('#cse').append(prev).append(next);
});

【讨论】：

【解决方案2】：

我使用了一些 Jquery，但可以不用。我把解释放在代码里了。

 //Listens for DOM changes
var observer = new MutationObserver(function (mutations, observer) {
    // fired when a mutation occurs
    makeNext();
});

// define what element should be observed by the observer
// and what types of mutations trigger the callback
observer.observe(document, {
    subtree: true,
    attributes: true
});

function makeNext() {
    //Make a Next element
    var el = $("<div></div>", {
        "id": "next",
        "class": "gsc-cursor-page", // need google class so is same look and works with them
        "text": "Next",
        "on": { // on click, find what is the current page, and trigger click on the one after
            "click": function () {
                $(".gsc-cursor-current-page").next(".gsc-cursor-page").click();
            }
        }
    });
    //When results load, lots of changes are made, but we only wont 1 Next button
    if ($("#next").length == 0) {
        $(".gsc-cursor").append(el);
    }
}

【讨论】：