本文详解如何用纯前端技术实现一个搜索框同时向两个不同语言/地区的网站（如 vistaprint 法国站与美国站）发起查询，并将结果并排显示在两个独立 iframe 中，解决因 id 重复、dom 获取方式错误导致的仅显示单个结果的问题。

要实现“一个搜索框、两个 iframe 并行加载不同网站结果”的功能，核心在于正确选取并分别控制两个 iframe 元素。原代码存在三个关键问题：

1. ID 重复：两个
2. 逻辑错误：iframe.src = url1 + '&' + url2 尝试将两个 URL 拼接为一个字符串赋值给单个 iframe，这既不符合 URL 规范，也无法实现双站点加载；
3. 缺少样式布局：未设置 iframe 的宽度、浮动或 Flex 布局，无法实现“侧边并排”视觉效果。

✅ 正确做法是：

• 为两个 iframe 分配唯一 ID（如 search-results-fr 和 search-results-en），或统一 name 属性后用 getElementsByTagName('iframe') 获取 NodeList；
• 在 JavaScript 中分别设置 iframe[0].src

  

  和 iframe[1].src；
• 通过 CSS 实现响应式并排布局（推荐使用 Flexbox）。

以下是完整可运行的优化示例：

  
  
  
  


  
? 双站点并行搜索
  

    
    开始对比
  

  
    
    
  

  

? 关键总结：

• 永远避免重复 ID —— 使用 id 表达唯一性，用 class 或 name 表达同类性；
• iframe 并行加载 = 分别赋值 src，而非拼接 URL；
• 用户体验不可少：添加响应式布局、输入校验、URL 编码、加载反馈；
• 现实限制需预判：跨域 iframe 嵌入受目标网站策略限制，开发时应优先测试目标站点是否允许嵌入（可查看其响应头 X-Frame-Options: DENY 或 Content-Security-Policy: frame-ancestors 'none'）。

掌握这一模式后，你可轻松扩展至多站点对比（如 Google vs Bing）、多区域版本比对（CN/JP/KR 站点），甚至集成翻译插件实现跨语言内容对照分析。