如何在JavaScript中不使用?符号传递URL变量值

嘿，我完全懂你的需求——不用那种带?的查询参数，直接把用户输入的track_no嵌入到URL的路径里，生成像https://google.com/[用户输入的track_no]这样的iframe地址对吧？PHP里确实搞起来很顺手，不过JavaScript里也一点不复杂，我给你两种实用的实现方式：

方法1：直观的字符串拼接（入门友好） #

首先假设你有一个用来输入运单号的HTML结构：

<input type="text" id="trackInput" placeholder="请输入运单号">
<button onclick="generateTrackIframe()">生成查询iframe</button>
<div id="iframeWrapper"></div>

然后对应的JavaScript代码：

function generateTrackIframe() {
  // 第一步：获取用户输入的track_no，顺便去掉前后空格
  const trackNo = document.getElementById('trackInput').value.trim();
  
  // 先做个简单校验，避免空输入或者无效内容
  if (!trackNo) {
    alert('请输入有效的运单号哦！');
    return;
  }
  
  // 第二步：构造目标URL，直接把track_no拼到基础路径后面
  // 这里一定要用encodeURIComponent处理输入，避免特殊字符破坏URL结构
  const baseUrl = 'https://google.com/';
  const targetIframeUrl = baseUrl + encodeURIComponent(trackNo);
  
  // 第三步：创建并插入iframe元素
  const iframe = document.createElement('iframe');
  iframe.src = targetIframeUrl;
  iframe.width = '100%';
  iframe.height = '600px';
  iframe.frameBorder = '0'; // 去掉默认的边框，更美观
  
  // 清空容器里之前的内容，再插入新iframe
  const wrapper = document.getElementById('iframeWrapper');
  wrapper.innerHTML = '';
  wrapper.appendChild(iframe);
}

方法2：使用URL API（更规范，推荐） #

如果你想更专业地处理URL，ES6引入的URL API是更好的选择，它能自动帮你处理URL的编码和结构，减少手动拼接的出错概率：

function generateTrackIframe() {
  const trackNo = document.getElementById('trackInput').value.trim();
  
  if (!trackNo) {
    alert('请输入有效的运单号哦！');
    return;
  }
  
  // 创建URL对象，基于你的基础地址
  const url = new URL('https://google.com/');
  // 将track_no追加到路径末尾，同样用encodeURIComponent确保安全
  url.pathname += encodeURIComponent(trackNo);
  
  // 生成iframe并插入页面
  const iframe = document.createElement('iframe');
  iframe.src = url.toString();
  iframe.width = '100%';
  iframe.height = '600px';
  iframe.frameBorder = '0';
  
  const wrapper = document.getElementById('iframeWrapper');
  wrapper.innerHTML = '';
  wrapper.appendChild(iframe);
}

小提醒 #

别忘了用encodeURIComponent()处理用户输入的track_no！因为用户可能输入像/、?、&这类特殊字符，直接拼到URL里会导致路径出错，这个方法能把这些字符转成URL安全的编码，保证地址的有效性。

另外要注意：你要嵌入的目标网站（比如示例里的google.com）得支持这种路径形式的访问哦，不然可能会返回404错误~

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