html 我希望能够搜索2个网站并排在iframes中,只使用一个搜索栏,是我的Javascript错误?

siv3szwd  于 2023-03-11  发布在  Java
关注(0)|答案(1)|浏览(131)

我已经创建了一个网页上的HTML搜索控制台在这里:

<title>Search Results</title>
    <style>
        iframe {
            width: 100%;
            height: 500px;
            border: none;
            margin-top: 20px;
        }
    </style>

    <h1>Search Results</h1>
    <form onsubmit="search(event)">
        <input type="text" id="search-box" placeholder="Enter keywords">
        <button type="submit">Search</button>
    </form>
    <iframe id="search-results"></iframe>
    <iframe id="search-results"></iframe>

我的Javascript是:

<script>
        function search(event) {
            event.preventDefault();
            var keywords = document.getElementById('search-box').value;
            var url1 = 'https://www.vistaprint.fr/search?query=' + keywords;
            var url2 = 'https://www.vistaprint.com/search?query=' + keywords;
            var iframe = document.getElementById('search-results');
            iframe.src = url1 + '&' + url2;
            }
    </script>

理想情况下,我希望看到两个iframe并列显示为搜索结果,但在这个示例中只显示了“url1”。
理想情况下,我希望看到两个iframe并列显示为搜索结果,但在这个示例中只显示了“url1”。

eh57zj3b

eh57zj3b1#

代码中的问题就像已经解释过的问题的注解一样,您正在使用返回1个元素的'getElementById'。
您可以向iframe元素添加标记,这样您就可以使用“getElementsByTagName”,这将生成一个包含2个元素的数组。
在这之后,你可以像这样把src添加到你的iframe元素中:

<!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" />
    <title>Search Results</title>
  </head>
  <body>
    <h1>Search Results</h1>
    <form onsubmit="search(event)">
      <input type="text" id="search-box" placeholder="Enter keywords" />
      <button type="submit">Search</button>
    </form>
    <iframe id="search-results-fr" name="iframe"></iframe>
    <iframe id="search-results-en" name="iframe"></iframe>
  </body>
  <script>
    function search(event) {
      event.preventDefault();
      var keywords = document.getElementById("search-box").value;
      var url1 = "https://www.vistaprint.fr/search?query=" + keywords;
      var url2 = "https://www.vistaprint.com/search?query=" + keywords;
      var iframe = document.getElementsByTagName("iframe");
      iframe[0].src = url1;
      iframe[1].src = url2;
    }
  </script>
</html>

相关问题