单搜索框双iframe并排搜两网站：我的JavaScript是否有误？

代码里的核心错误： #

• 重复的iframe ID：两个iframe都用了search-results作为ID，DOM中ID必须唯一，getElementById只会获取第一个匹配的iframe，第二个永远不会被操作。
• 错误的URL拼接：你把两个站点的URL强行拼在一起赋值给单个iframe的src，这是无效操作，相当于给第一个iframe设置了一个混乱的无效URL，完全达不到同时加载两个站点的目的。
• 布局问题：原CSS里iframe宽度设为100%，会让两个iframe上下堆叠，没法实现并排显示的需求。

修正后的完整代码： #

HTML + CSS 部分：

<title>Search Results</title>
<style>
    .iframe-container {
        display: flex;
        gap: 20px;
        margin-top: 20px;
    }
    iframe {
        flex: 1;
        height: 500px;
        border: none;
    }
</style>

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

JavaScript 部分：

<script>
    function search(event) {
        event.preventDefault();
        const keywords = document.getElementById('search-box').value.trim();
        if (!keywords) return; // 空关键词不执行搜索
        
        const frUrl = `https://www.vistaprint.fr/search?query=${encodeURIComponent(keywords)}`;
        const usUrl = `https://www.vistaprint.com/search?query=${encodeURIComponent(keywords)}`;
        
        document.getElementById('fr-results').src = frUrl;
        document.getElementById('us-results').src = usUrl;
    }
</script>

额外优化说明： #

• 给两个iframe设置了唯一ID，分别对应法国站点和美国站点，单独赋值对应的搜索URL。
• 用flex布局实现两个iframe并排，宽度自动均分，中间留间隙。
• 加入encodeURIComponent处理关键词，避免空格、&等特殊字符导致URL失效。
• 增加空关键词判断，避免无意义的搜索请求。

内容的提问来源于stack exchange，提问作者WillHazC