本文详解如何通过 javascript 同时向两个不同域名的网站（如 vistaprint 法国站与美国站）提交同一关键词，并将结果并排显示在两个独立 iframe 中，解决因重复 id 导致仅一个 iframe 加载的问题。
要实现“一个搜索框、双 iframe 并行展示结果”，核心问题在于 HTML 中ID 必须唯一。原代码中两个 <iframe> 均使用 id="search-results"，导致 document.getElementById('search-results') 只返回第一个匹配元素，后续赋值自然失效；同时 url1 + '&' + url2 的拼接方式在 URL 中毫无意义——iframe 的 src 属性仅接受单个有效 URL。
✅ 正确做法是：
- 为两个 iframe 分配唯一 ID（如 search-results-fr 和 search-results-en），或统一 name 属性后用 getElementsByTagName('iframe') 获取集合；
- 分别为每个 iframe 设置对应的目标 URL；
- 添加基础 CSS 实现侧边布局（原代码中 iframe 默认块级垂直堆叠，需显式设置宽度与浮动/弹性布局）。
以下是完整可运行的优化示例：
<!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;
margin: 0;
padding: 20px;
}
.search-form {
margin-bottom: 24px;
}
#search-box {
padding: 10px;
font-size: 16px;
width: 300px;
border: 1px solid #ccc;
border-radius: 4px 0 0 4px;
vertical-align: top;
}
button {
padding: 10px 16px;
font-size: 16px;
background: #007bff;
color: white;
border: none;
border-radius: 0 4px 4px 0;
cursor: pointer;
}
.iframes-container {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.iframe-wrapper {
flex: 1;
min-width: 300px;
height: 500px;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
iframe {
width: 100%;
height: 100%;
border: none;
border-radius: 8px;
}
@media (max-width: 768px) {
.iframes-container {
flex-direction: column;
}
}
</style>
</head>
<body>
<h1>? 双站并行搜索</h1>
<form class="search-form" onsubmit="search(event)">
<input type="text" id="search-box" placeholder="输入关键词（例如：business card）" required />
<button type="submit">开始搜索</button>
</form>
<div class="iframes-container">
<div class="iframe-wrapper">
<iframe title="VistaPrint 法国站结果" src="about:blank"></iframe>
</div>
<div class="iframe-wrapper">
<iframe title="VistaPrint 美国站结果" src="about:blank"></iframe>
</div>
</div>
<script>
function search(event) {
event.preventDefault();
const keywords = document.getElementById('search-box').value.trim();
if (!keywords) return;
// 构建双站搜索 URL（已做基础编码，避免特殊字符破坏 URL）
const encodedQuery = encodeURIComponent(keywords);
const urlFR = `https://www.vistaprint.fr/search?query=${encodedQuery}`;
const urlUS = `https://www.vistaprint.com/search?query=${encodedQuery}`;
// 获取所有 iframe 元素（按 DOM 顺序）
const iframes = document.querySelectorAll('iframe');
if (iframes.length >= 2) {
iframes[0].src = urlFR;
iframes[1].src = urlUS;
}
}
// 可选：回车键即时触发（增强体验）
document.getElementById('search-box').addEventListener('keyup', (e) => {
if (e.key === 'Enter') search(e);
});
</script>
</body>
</html>? 关键改进说明：
- ✅ 使用 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）、添加加载状态提示，甚至集成搜索建议与历史记录，打造专业级比价/多源检索工具。
