本文详解如何用一个搜索框同时向两个不同语言/地区的网站（如 vistaprint 法国站与美国站）发起搜索，并将结果并排显示在两个独立 iframe 中——核心在于正确获取并分别设置多个 iframe 的 src 属性。

要实现“单搜索框、双 iframe 并行加载”，关键问题在于：HTML 中 id 必须唯一，而 document.getElementById() 只能返回第一个匹配元素。原代码中两个

✅ 正确做法是：

1. 为每个 iframe 分配唯一 ID（如 search-results-fr 和 search-results-en），或统一使用 class/name 配合集合式查询；
2. 用 document.getElementsByTagName('iframe') 或 document.querySelectorAll('iframe') 获取所有 iframe 节点列表；
3. 分别赋值 src 属性，确保各自加载对应目标 URL；
4. 添加 CSS 实现侧边布局，提升可读性与用户体验。

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

  
  
  
  


  
? 双站点并行搜索
  

    
    执行双站搜索
  

  
    
    
  

  

? 注意事项与增强建议：

• ✅ URL 编码必须：使用 encodeURIComponent(keywords) 防止空格、特殊字符（如 &, +, /）破坏 URL 结构；
• ⚠️ 跨域限制：多数主流网站（包括 VistaPrint）通过 X-Frame-Options 或 Content-Security-Policy: frame-ancestors 禁止被嵌入 iframe。若页面空白或报错 Refused to display ... in a frame，说明目标站主动阻止了嵌入——此时需改用跳转新标签页或后端代理方案；
• ✅ 安全沙箱推荐：添加 sandbox="allow-scripts allow-same-origin" 提升 iframe 安全性（注意：allow-same-origin 仅在同源时生效，此处主要用于兼容性占位）；

• 

  ? 扩展性提示：如需支持更多站点，只需增加 iframe 元素，并在 JS 中按索引或 class 动态映射 URL 数组即可；
• ? 用户体验优化：可添加加载状态（如 loading spinner）、错误 fallback 提示（如 iframe.onload/onerror 监听），或启用 loading="lazy" 延迟加载非首屏 iframe。

通过以上结构化实现，你将获得一个健壮、可维护、符合现代 Web 标准的双站并行搜索界面——既解决原始逻辑缺陷，又兼顾可用性与前瞻性扩展能力。