Question

我以某种形式进行输入搜索，我想以某种形式获得某种东西并在bing.com中进行搜索，然后在iframe中显示结果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SearchBing</title>
    <base target="iframe1">
</head>
<body style="text-align: center;">
    <form action="https://www.bing.com/search?q" method="POST" >
        <input type="search"  name="q" style="border:2px solid grey; border-radius: 10px; width: 400px; height: 30px;" />
        <input type="submit" value="search"  style="background-color:brown; color:white; height:25px; width:80px; border:none; border-radius:10px; font-size: 18px; "/>
        <br/>
        <br/>
        <iframe name="iframe1" height="400px" width="800px" style="border: 2px solid black; border-radius: 10px;"></iframe>
    </form>
</body>
</html>

Answer 1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SearchBing</title>
    <base target="iframe1">
</head>
<body style="text-align: center;">
    <div>
        <input id="input" type="search"  name="q" style="border:2px solid grey; border-radius: 10px; width: 400px; height: 30px;" />
        <button id="submit" style="background-color:brown; color:white; height:25px; width:80px; border:none; border-radius:10px; font-size: 18px; ">search</button>
        <br/>
        <br/>
        <iframe id="iframe1" name="iframe1" height="400px" width="800px" style="border: 2px solid black; border-radius: 10px;"></iframe>
    </div>
    <script>
    document.getElementById("submit").onclick = function() {
      const value = document.getElementById("input").value;
      const iframe = document.getElementById("iframe1");
      iframe.src = `https://www.bing.com/search?q=${value}`
    }
    </script>
</body>
</html>

输入搜索和iframe以使用html显示结果

1 个答案: