本文详解如何通过 javascript 同时向两个不同语言版本的 vistaprint 网站（法语/英语）发起搜索，并在页面中并排显示结果——核心在于正确获取并分别设置两个 iframe 的 `src` 属性，避免 id 重复与 dom 查询错误。
要实现“一个搜索框驱动两个 iframe 并行加载不同网站搜索结果”的功能，关键在于两点：HTML 结构的唯一性保障 和 JavaScript 对多个 iframe 的精准控制。你原始代码中的主要问题有三处：
- ID 重复：<iframe id="search-results"></iframe> 出现两次，而 HTML 中 id 必须全局唯一。document.getElementById() 只会返回第一个匹配元素，因此第二个 iframe 完全未被操作；
- 逻辑错误：iframe.src = url1 + '&' + url2 尝试将两个 URL 拼接成一个字符串赋值给单个 iframe，这既不符合 URL 规范，也无法实现双窗口加载；
- 缺少样式布局：默认 iframe 是块级元素，垂直堆叠；要“并排显示”，需添加 CSS 控制宽度与浮动或使用 Flex 布局。
✅ 正确做法是：为两个 iframe 分配不同且唯一的 ID（如 search-results-fr 和 search-results-en），再通过 document.getElementsByTagName('iframe') 或更推荐的 document.querySelectorAll() 获取 NodeList，然后分别赋值。
以下是优化后的完整可运行示例：
<!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", Roboto, sans-serif;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
form {
margin-bottom: 24px;
}
input[type="text"] {
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: 500px;
height: 500px;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
iframe {
width: 100%;
height: 100%;
border: none;
border-radius: 8px;
}
@media (max-width: 768px) {
.iframes-container {
flex-direction: column;
}
.iframe-wrapper {
min-width: 100%;
}
}
</style>
</head>
<body>
<h1>? 双站点并行搜索</h1>
<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 id="search-results-fr" title="VistaPrint 法国站结果"></iframe>
<small>?? VistaPrint.fr（法语）</small>
</div>
<div class="iframe-wrapper">
<iframe id="search-results-en" title="VistaPrint 美国站结果"></iframe>
<small>?? VistaPrint.com（英语）</small>
</div>
</div>
<script>
function search(event) {
event.preventDefault();
const keywords = document.getElementById('search-box').value.trim();
if (!keywords) {
alert('请输入搜索关键词');
return;
}
// 构建目标 URL（注意：实际使用前请确认目标站点允许 iframe 嵌入）
const urlFr = `https://www.vistaprint.fr/search?query=${encodeURIComponent(keywords)}`;
const urlEn = `https://www.vistaprint.com/search?query=${encodeURIComponent(keywords)}`;
// 安全获取 iframe 元素（推荐使用 querySelectorAll + 唯一 ID）
const iframeFr = document.getElementById('search-results-fr');
const iframeEn = document.getElementById('search-results-en');
if (iframeFr && iframeEn) {
iframeFr.src = urlFr;
iframeEn.src = urlEn;
} else {
console.error('未能找到指定 iframe 元素，请检查 ID 是否正确');
}
}
</script>
</body>
</html>? 重要注意事项：
- 跨域限制（X-Frame-Options / CSP）：现代网站（包括 VistaPrint）通常设置 X-Frame-Options: DENY 或 Content-Security-Policy: frame-ancestors 'none'，直接嵌入其搜索页将触发空白或拒绝加载。这是浏览器安全策略，无法通过前端绕过。生产环境建议改用官方 API（如有）或服务端代理中转。
- URL 编码：使用 encodeURIComponent() 处理用户输入，防止空格、特殊符号导致 URL 解析失败。
- 响应式适配：示例中已加入 Flex + Media Query，在移动设备上自动切换为上下排列，提升可用性。
- 可访问性增强：为每个 iframe 添加 title 属性和语义化 <small> 标注，便于屏幕阅读器识别。
? 总结：单搜索框驱动双 iframe 的本质，是「一对多 DOM 操作」+「语义化结构设计」。只要确保元素唯一、选择器准确、URL 合法，并兼顾安全与体验，即可稳健实现并行比对效果——但务必提前验证目标网站是否允许被 iframe 嵌入。
