本文详解如何用纯前端技术实现一个搜索框同时向两个不同语言/地区的网站（如 vistaprint 法国站与美国站）发起查询，并将结果并排显示在两个独立 iframe 中，解决因 id 重复、dom 获取方式错误导致的仅显示单个结果的问题。
要实现“一个搜索框、两个 iframe 并行加载不同网站结果”的功能，核心在于正确选取并分别控制两个 iframe 元素。原代码存在三个关键问题：
- ID 重复：两个 <iframe> 使用了相同的 id="search-results"，而 HTML 规范要求 id 必须唯一，document.getElementById() 仅返回第一个匹配元素；
- 逻辑错误：iframe.src = url1 + '&' + url2 尝试将两个 URL 拼接为一个字符串赋值给单个 iframe，这既不符合 URL 规范，也无法实现双站点加载；
- 缺少样式布局：未设置 iframe 的宽度、浮动或 Flex 布局，无法实现“侧边并排”视觉效果。
✅ 正确做法是：
- 为两个 iframe 分配唯一 ID（如 search-results-fr 和 search-results-en），或统一 name 属性后用 getElementsByTagName('iframe') 获取 NodeList；
- 在 JavaScript 中分别设置 iframe[0].src 和 iframe[1].src；
- 通过 CSS 实现响应式并排布局（推荐使用 Flexbox）。
以下是完整可运行的优化示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>双站并行搜索</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
h1 { color: #333; }
form {
margin: 20px 0;
display: flex;
gap: 10px;
}
#search-box {
flex: 1;
padding: 10px 14px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
padding: 10px 20px;
background: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.iframes-container {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.iframes-container iframe {
flex: 1;
min-width: 300px;
height: 500px;
border: 1px solid #e0e0e0;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
@media (max-width: 768px) {
.iframes-container {
flex-direction: column;
}
}
</style>
</head>
<body>
<h1>? 双站点并行搜索</h1>
<form onsubmit="search(event)">
<input type="text" id="search-box" placeholder="输入关键词（例如：business card）" autocomplete="off">
<button type="submit">开始对比</button>
</form>
<div class="iframes-container">
<iframe id="search-results-fr" title="VistaPrint 法国站"></iframe>
<iframe id="search-results-en" title="VistaPrint 美国站"></iframe>
</div>
<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（使用唯一 ID 更语义化、更可靠）
document.getElementById('search-results-fr').src = urlFR;
document.getElementById('search-results-en').src = urlUS;
}
// ⚠️ 注意事项：
// 1. 目标网站（如 vistaprint.com/fr）可能设置 X-Frame-Options 或 Content-Security-Policy 阻止被嵌入；
// 若 iframe 显示为空白或报错 "Refused to display ... in a frame"，说明该站点禁止 iframe 加载；
// 2. 务必对用户输入使用 encodeURIComponent() 编码关键词，避免特殊字符（空格、&、+ 等）破坏 URL；
// 3. 生产环境建议增加加载状态提示（如 loading spinner）和错误兜底处理。
</script>
</body>
</html>? 关键总结：
- 永远避免重复 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 站点），甚至集成翻译插件实现跨语言内容对照分析。
