如何将文本框变量传入URL并在iframe中打开页面

嗨Martyn，我已经帮你调整了代码，现在点击搜索按钮后，结果会直接在搜索框下方的iframe里打开，这样你可以保留搜索框继续进行多次搜索，不用跳转页面啦。

还原你的基础代码结构 #

<!DOCTYPE html>
<html>
<body>
Search by word (case sensitive):<br>
<input type="text" id="searchTerm">
<button onclick="search()">Search</button>

<script>
function search() {
  var term = document.getElementById("searchTerm").value;
  // 原来的逻辑是直接跳转页面
  window.location.href = "YOUR_TARGET_URL?search=" + term;
}
</script>
</body>
</html>

修改后的完整代码 #

<!DOCTYPE html>
<html>
<body>
Search by word (case sensitive):<br>
<input type="text" id="searchTerm">
<button onclick="search()">Search</button>

<!-- 添加用于显示结果的iframe，设置基础样式和唯一ID -->
<iframe id="resultFrame" width="100%" height="600px" style="border:1px solid #ccc; margin-top:10px;" title="Search Results"></iframe>

<script>
function search() {
  var term = document.getElementById("searchTerm").value;
  
  // 可选：增加空输入校验，优化用户体验
  if (!term.trim()) {
    alert("请输入搜索关键词哦！");
    return;
  }
  
  // 获取iframe元素，修改src属性加载目标页面
  var resultFrame = document.getElementById("resultFrame");
  // 用encodeURIComponent编码关键词，避免特殊字符破坏URL结构
  resultFrame.src = "YOUR_TARGET_URL?search=" + encodeURIComponent(term);
}
</script>
</body>
</html>

关键修改说明 #

• 新增iframe容器：在搜索控件下方添加了带id="resultFrame"的iframe，设置了宽度、高度和边框样式，确保结果区域清晰可见
• 替换跳转逻辑：不再使用window.location.href跳转页面，而是通过修改iframe的src属性来加载搜索结果，实现页面内局部更新
• 优化关键词处理：用encodeURIComponent()对搜索关键词编码，确保空格、&等特殊字符能正确传递到URL中，避免请求出错
• 可选空输入校验：增加简单的非空检查，防止用户误触搜索按钮发送无效请求

这样调整后，每次点击搜索按钮，下方的iframe都会自动更新显示对应的搜索结果，你可以随时在上方搜索框输入新关键词重复搜索，完全不用离开当前页面~

内容的提问来源于stack exchange，提问作者Martyn