我想在另一个页面和不同的 div 下显示 google 自定义搜索结果

Question

我想将 google 的自定义搜索引擎集成到我的网站中。我将搜索框放在 index.html 页面的导航栏上，因此 GCSE 在 navbar 部分中显示结果令人不快，但我想在 search-page.html 和 arkaplan 下显示搜索结果 div。我怎样才能做到这一点？这种情况有javascript代码吗？还有，我用了form get方法，取不到任何结果

我的index.html是这样的

<!DOCTYPE html>
<html lang="en">

<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" type="image/png" href="img/favicon.png" />
    <title>Example Page</title>

</head>

<body>
    <div class="container">
        <div class="ct-content">
            <div class="header-img">
                <img src="img/header-cloud.jpg" alt="header">
                <h1 class="header-yazi">Example Page</h1>
            </div>
            <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
                <div class="container-fluid">
                    <a class="navbar-brand" href="#">examplepage.com</a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                        data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false"
                        aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse justify-content-center" id="navbarNavDropdown">
                        <ul class="navbar-nav text-center ">
                            <li class="nav-item ">
                                <a class="nav-link active" aria-current="page" href="#">Ana Sayfa</a>
                            </li>
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button"
                                    data-bs-toggle="dropdown" aria-expanded="false">
                                    Rüyalar
                                </a>
                                <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                                    <li><a class="dropdown-item" href="#">Home Page</a></li>
                                    <li><a class="dropdown-item" href="#">Google</a></li>
                                    <li><a class="dropdown-item" href="#">Custom</a></li>
                                    <li><a class="dropdown-item" href="#">Search</a></li>
                                </ul>
                            </li>

                            <li class="nav-item">
                                <a class="nav-link" href="#">Example 1</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Example 2</a>
                            </li>

                            <li class="nav-item">
                                <a class="nav-link" href="#">Example 3</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Example 4</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link yesil" href="/search-page.html">Search Page</a>
                            </li>

                        </ul>
                        <form>
                            <script async src="https://cse.google.com/cse.js?cx=1234567890"></script>
                            <div class="gcse-search"></div>
                        </form>
                    </div>
                </div>
        </div>
        </nav>

我的search-page.html是这样的

<!DOCTYPE html>
<html lang="en">

<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script src="https://kit.fontawesome.com/149bed2a73.js" crossorigin="anonymous"></script>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" type="image/png" href="img/favicon.png" />
    <title>Example Page</title>

</head>

<body>
    <div class="container">
        <div class="header-img">
            <img src="img/header-cloud.jpg" alt="header">
            <h1 class="header-yazi">Example Page</h1>
        </div>
        <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
            <div class="container-fluid">
                <a class="navbar-brand" href="#">examplepage.com</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                    data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false"
                    aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse justify-content-center" id="navbarNavDropdown">
                    <ul class="navbar-nav text-center ">
                        <li class="nav-item ">
                            <a class="nav-link active" aria-current="page" href="/index.html">Home Page</a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button"
                                data-bs-toggle="dropdown" aria-expanded="false">
                                Example 1
                            </a>
                            <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                                <li><a class="dropdown-item" href="#">Example 2</a></li>
                                <li><a class="dropdown-item" href="#">Example 3</a></li>
                                <li><a class="dropdown-item" href="#">Example 4</a></li>
                                <li><a class="dropdown-item" href="#">Example 5</a></li>
                            </ul>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="#">Example 6</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Example 7/a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="#">Example8</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Example9</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link yesil" href="/search-page.html">SearchPage</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <div class="arkaplan yukseklik">

            I want to show search results in here

        </div>
        <div class="footer">
            <span>Copyright © 2022</span>

        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
        integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
        integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
        crossorigin="anonymous"></script>
</body>

</html>

Answer 1

我终于从源头找到了我的问题的解决方案。 首先我想分享我更新的 index.html: 重要代码在 </nav> 标签下和 </body> 标签上。我把搜索栏放在导航栏下面了。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<title>Example Website</title>
    </head>
    <body>
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="container-fluid">
              <a class="navbar-brand" href="#">Navbar</a>
              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                  <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Home Page</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Google</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Custom</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link disabled">Search</a>
                  </li>
                </ul>
              </div>
            </div>
          </nav>
          <script src="/search.js" async defer></script>
          <gcse:searchbox-only resultsUrl="/search-page.html"></gcse:searchbox-only>
    </body>
    </html>

其次我想分享search-page.html。您应该将结果重定向到另一个页面。 重要代码再次位于 </nav> 标签下方和 </body> 标签上方 form 元素

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
        <title>Example Website</title>
    </head>
    <body>
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="container-fluid">
              <a class="navbar-brand" href="#">Navbar</a>
              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                  <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Home Page</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Google</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Custom</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link disabled">Search</a>
                  </li>
                </ul>
              </div>
            </div>
          </nav>
          <form>
            <script async src="https://cse.google.com/cse.js?cx=1234567890"></script>
            <div class="gcse-search"></div>
        </form>
    </body>
    </html>

最后您需要一个 javascript 代码。如果您愿意，我可以在外部使用它，您可以在内部使用。对于内部 js 代码，您可以使用 script type="module" 进行延迟。您应该在 var cx = 前面输入您的 google 自定义搜索代码。 js代码应该在</nav>和</body>标签之间的index.html。我写成 search.js

(function () {
    var cx = '1234567890';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
})();

你可以在这个link看到原来的页面：Source

我想在另一个页面和不同的 div 下显示 google 自定义搜索结果

I want to show google custom search results in another page and under a different div

html

javascript

search