本文详解如何通过 javascript 同时向两个不同域名的网站（如 vistaprint 法国站与美国站）提交同一关键词，并将结果并排显示在两个独立 iframe 中，解决因重复 id 导致仅一个 iframe 加载的问题。
要实现“一个搜索框、双 iframe 并行展示结果”，核心问题在于 HTML 中ID 必须唯一。原代码中两个
✅ 正确做法是：
- 为两个 iframe 分配唯一 ID（如 search-results-fr 和 search-results-en），或统一 name 属性后用 getElementsByTagName('iframe') 获取集合；
- 分别为每个 iframe 设置对应的目标 URL；
- 添加基础 CSS 实现侧边布局（原代码中 iframe 默认块级垂直堆叠，需显式设置宽度与浮动/弹性布局）。
以下是完整可运行的优化示例：
双站并行搜索 ? 双站并行搜索
? 关键改进说明：
- ✅ 使用 querySelectorAll('iframe') 安全获取多个 iframe，避免 ID 冲突；
- ✅ 添加 encodeURIComponent() 防止空格、&、# 等特殊字符导致 URL 截断或解析错误；
- ✅ 采用 Flexbox 布局实现真正「侧边并排」，并兼容移动端（小屏自动转为上下排列）；
- ✅ 添加 title 属性提升无障碍访问支持；
- ✅ 初始化 src="about:blank" 避免页面加载时空白 iframe 触发无关请求；
- ✅ 补充 Enter 键快捷搜索支持，提升交互效率。
⚠️ 注意事项：
由于同源策略（CORS）和目标网站的 X-Frame-Options 或 Content-Security-Policy 限制，部分网站（包括 VistaPrint）可能禁止被嵌入 iframe。若出现“Refused to display … in a frame”错误，说明该站点主动拒绝了嵌入——此时前端无法绕过，需考虑替代方案（如跳转新标签页、调用公开 API 或使用代理服务）。建议上线前先手动测试目标 URL 是否可 iframe 加载。
掌握这一模式后，你可轻松扩展至更多站点（如 Google + Bing）、添加加载状态提示，甚至集成搜索建议与历史记录，打造专业级比价/多源检索工具。
