本文详解如何通过一个搜索框同时向两个不同语言/地区的网站（如 vistaprint 法国站与美国站）发起搜索，并将结果并排显示在两个独立 iframe 中，解决因 id 重复和 dom 查询方式错误导致的仅加载首个 iframe 的问题。
在您的原始代码中，核心问题有两个：ID 重复和DOM 查询逻辑错误。
首先，HTML 中两个
其次，iframe.src = url1 + '&' + url2 这种拼接方式本身是无效的——src 属性只接受单个合法 URL，无法承载两个地址。正确做法是分别设置两个 iframe 的 src 属性。
✅ 正确解决方案如下：
1. 为两个 iframe 分配唯一 ID（推荐）或统一 name/class
使用语义化、唯一的 id（如 search-results-fr 和 search-results-en），便于精准控制：
生成HTML格式PPT
下载
从零开始创建惊艳、动画丰富且自包含的 HTML 演示文稿，或通过转换 PowerPoint 文件生成。当用户希望制作幻灯片、构建演示文稿、打造路演资料（pitch deck）、将 PPT/PPTX 转换为网页格式，或增强现有 HTML 演示文稿时，应使用此能力。该能力帮助用户通过视觉预览而非抽象选项来发掘自身审美偏好。
<iframe id="search-results-fr" width="100%" height="500px" style="display:inline-block; vertical-align:top; border:1px solid #ddd;"></iframe> <iframe id="search-results-en" width="100%" height="500px" style="display:inline-block; vertical-align:top; border:1px solid #ddd; margin-left:4%;"></iframe>
? 提示：添加内联样式实现「侧边并排」布局（display: inline-block + vertical-align: top），并预留间距避免紧贴。响应式场景下建议改用 CSS Flexbox 或 Grid。
2. JavaScript 中分别获取并赋值
不再依赖 getElementById（只能取一个），而是通过唯一 ID 精确选取两个元素：
<script>
function search(event) {
event.preventDefault();
const keywords = document.getElementById('search-box').value.trim();
// 防空搜索
if (!keywords) return;
const urlFr = `https://www.vistaprint.fr/search?query=${encodeURIComponent(keywords)}`;
const urlUs = `https://www.vistaprint.com/search?query=${encodeURIComponent(keywords)}`;
// 分别设置两个 iframe 的 src
document.getElementById('search-results-fr').src = urlFr;
document.getElementById('search-results-en').src = urlUs;
}
</script>
⚠️ 关键增强点说明：
- 使用 encodeURIComponent() 对关键词编码，确保空格、特殊符号（如 &, +, #）正确传递，避免 URL 截断或参数解析错误；
- 添加 trim() 和空值校验，防止提交空白搜索；
- 两个 iframe 的 src 被独立、明确地赋值，彻底规避覆盖或遗漏。
3. 注意事项与限制
- ? 跨域限制（CORS / X-Frame-Options）：目标网站（如 vistaprint.com/fr）可能设置了 X-Frame-Options: DENY 或 Content-Security-Policy: frame-ancestors，导致 iframe 加载失败（控制台报错 Refused to display ... in a frame）。这是服务端策略，前端无法绕过。可先手动在新标签页测试目标搜索 URL 是否可嵌入，或联系对方开放嵌入权限。
- ? HTTPS 安全要求：若您的页面为 https://，所有 iframe src 也必须为 HTTPS，否则现代浏览器会阻止混合内容（Mixed Content）。
- ? 移动端适配：并排 iframe 在小屏上体验差，建议配合媒体查询切换为上下堆叠布局：
@media (max-width: 768px) {
iframe { display: block; width: 100%; margin-left: 0; }
}
通过以上修正，您即可实现「一搜即双显」的专业搜索对比界面——简洁、健壮、符合 Web 标准。
