本文详解如何通过 javascript 同时向两个不同语言版本的 vistaprint 网站（法语/英语）发起搜索，并在页面中并排显示结果——核心在于正确获取并分别设置两个 iframe 的 `src` 属性，避免 id 重复与 dom 查询错误。

要实现“一个搜索框驱动两个 iframe 并行加载不同网站搜索结果”的功能，关键在于两点：HTML 结构的唯一性保障 和 JavaScript 对多个 iframe 的精准控制。你原始代码中的主要问题有三处：

1. ID 重复： 出现两次，而 HTML 中 id 必须全局唯一。document.getElementById() 只会返回第一个匹配元素，因此第二个 iframe 完全未被操作；
2. 逻辑错误：iframe.src = url1 + '&' + url2 尝试将两个 URL 拼接成一个字符串赋值给单个 iframe，这既不符合 URL 规范，也无法实现双窗口加载；
3. 缺少样式布局：默认 iframe 是块级元素，垂直堆叠；要“并排显示”，需添加 CSS 控制宽度与浮动或使用 Flex 布局。

✅ 正确做法是：为两个 iframe 分配不同且唯一的 ID（如 search-results-fr 和 search-results-en），再通过 document.getElementsByTagName('iframe') 或更推荐的 document.querySelectorAll() 获取 NodeList，然后分别赋值。

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

  
  
  
  


  
? 双站点并行搜索
  

    
    执行双站搜索
  

  
    
      
      ?? VistaPrint.fr（法语）
    
    
      
      ?? VistaPrint.com（英语）
    
  

  

? 重要注意事项：

• 跨域限制（X-Frame-Options / CSP）：现代网站（包括 VistaPrint）通常设置 X-Frame-Options: DENY 或 Content-Security-Polic

  

  y: frame-ancestors 'none'，直接嵌入其搜索页将触发空白或拒绝加载。这是浏览器安全策略，无法通过前端绕过。生产环境建议改用官方 API（如有）或服务端代理中转。
• URL 编码：使用 encodeURIComponent() 处理用户输入，防止空格、特殊符号导致 URL 解析失败。
• 响应式适配：示例中已加入 Flex + Media Query，在移动设备上自动切换为上下排列，提升可用性。
• 可访问性增强：为每个 iframe 添加 title 属性和语义化 标注，便于屏幕阅读器识别。

? 总结：单搜索框驱动双 iframe 的本质，是「一对多 DOM 操作」+「语义化结构设计」。只要确保元素唯一、选择器准确、URL 合法，并兼顾安全与体验，即可稳健实现并行比对效果——但务必提前验证目标网站是否允许被 iframe 嵌入。