本文介绍如何将搜索关键词通过 url 参数传递到新页面，并在目标页面中动态获取参数、调用 api 渲染电影列表，避免 localstorage 或错误跳转导致的失效问题。
在单页应用逻辑不适用的静态 HTML 环境中（如纯前端部署），直接在 index.html 中执行 API 请求并渲染结果，无法自然延续到另一个独立 HTML 页面（如 movies.html）。这是因为每个 HTML 文件是独立的执行上下文，localStorage 虽可跨页通信，但易受隐私策略（如第三方 Cookie 限制）、手动清缓存或同源策略干扰；而 window.location.href 若未正确触发或被 event.preventDefault() 阻止，则跳转失败——这正是原代码中点击无响应的根本原因。
✅ 正确方案：利用 URL 查询参数（Query String）实现轻量、可靠、无状态的跨页数据传递。
✅ 第一步：在首页（index.html）仅做跳转，不请求 API
移除首页中冗余的 main() 调用和 localStorage 操作，改为将搜索词拼接为 URL 参数后跳转：
<form id="movie__searchbox" class="nav__search-bar"> <input type="text" id="searchbar" class="nav__search" placeholder="Search movies..." required /> <button type="submit">Search</button> </form>
<script>
const moviesForm = document.getElementById("movie__searchbox");
moviesForm.addEventListener("submit", (event) => {
event.preventDefault();
const query = document.getElementById("searchbar").value.trim();
if (!query) return;
// ✅ 正确跳转：携带搜索关键词作为查询参数
window.location.href = `movies.html?value=${encodeURIComponent(query)}`;
});
</script>⚠️ 注意：使用 encodeURIComponent() 对用户输入编码，防止空格、特殊字符（如 &, =）破坏 URL 结构；同时添加 required 和 trim() 校验，提升健壮性。
✅ 第二步：在结果页（movies.html）解析参数并渲染
movies.html 保持结构简洁，只保留容器与脚本：
<!DOCTYPE html>
<html>
<head><title>Movies Search Results</title></head>
<body>
<div class="shows"></div>
<script>
const movieListEl = document.querySelector(".shows");
// ? 从当前 URL 中提取 search value
const urlParams = new URLSearchParams(window.location.search);
const searchValue = urlParams.get("value");
if (!searchValue) {
movieListEl.innerHTML = "<p class='no-result'>⚠️ No search term provided. Please go back and try again.</p>";
console.warn("Missing 'value' parameter in URL");
throw new Error("Missing search query parameter");
}
// ? 调用 OMDB API 获取数据
async function fetchMovies(query) {
try {
const res = await fetch(`https://www.omdbapi.com/?apikey=39a36280&s=${encodeURIComponent(query)}`);
if (!res.ok) throw new Error(`API error: ${res.status} ${res.statusText}`);
const data = await res.json();
if (!data.Search || data.Search.length === 0) {
movieListEl.innerHTML = `<p class="no-result">? No movies found for "${searchValue}". Try another keyword.</p>`;
return;
}
movieListEl.innerHTML = data.Search.map(movieHTML).join("");
} catch (err) {
console.error("Failed to fetch movies:", err);
movieListEl.innerHTML = `<p class="error">❌ Failed to load results: ${err.message}</p>`;
}
}
function movieHTML(movie) {
return `
<div class="shows__content">
<figure class="shows__poster">
<img src="${movie.Poster !== "N/A" ? movie.Poster : "https://via.placeholder.com/150x225/eee/999?text=No+Poster"}"
alt="${movie.Title}" class="poster">
</figure>
<div class="poster__description">
<h4 class="poster__title">${movie.Title}</h4>
<p class="poster__year">${movie.Year}</p>
</div>
</div>
`;
}
// ? 启动加载
fetchMovies(searchValue);
</script>
</body>
</html>✅ 关键优势与注意事项
- 零依赖、高兼容：无需服务端，纯前端即可运行，适配所有现代浏览器；
- SEO 友好：URL 包含语义化参数（如 movies.html?value=avengers），利于调试与分享；
- 错误防御完善：检查参数是否存在、API 响应状态、Poster 是否为 "N/A" 并提供占位图；
- 安全规范：始终对用户输入进行 encodeURIComponent() 编码，防范 XSS 风险（尽管此处用于 URL，非 DOM 插入，但仍属最佳实践）；
- 命名一致性：确保跳转目标文件名与实际文件一致（如示例中为 movies.html，而非 movieList.html），避免 404。
通过这种“跳转传参 + 页面自驱动”的模式，你既解耦了搜索入口与结果展示，又保证了流程清晰、调试直观、维护成本低——这才是静态站点中跨页传递搜索结果的专业实践。
