点击menu.jsp菜单链接时，如何获取Page1.jsp的文本框/标签值？

嘿，这个问题得看你的页面具体是怎么布局的，我给你分几种最常见的场景来讲解，你可以对应自己的情况来选：

场景1：menu.jsp和Page1.jsp在同一页面的框架/iframe中 #

比如你用了frameset，或者把menu放在左侧iframe、Page1放在主内容iframe，两者同属一个父页面。这种情况下可以通过JavaScript跨iframe访问元素。

举个实际的例子，假设你的父页面结构是这样的：

<iframe name="menuFrame" src="menu.jsp"></iframe>
<iframe name="contentFrame" src="Page1.jsp"></iframe>

那在menu.jsp里，给链接添加点击事件，先获取Page1里的值再做后续操作：

<!-- menu.jsp中的链接 -->
<a href="#" onclick="getValueFromPage1(); return false;">点击获取Page1的内容</a>

<script>
function getValueFromPage1() {
    // 获取承载Page1的iframe对象
    const contentFrame = window.parent.frames['contentFrame'];
    // 获取Page1里id为inputTxt的文本框的值
    const inputValue = contentFrame.document.getElementById('inputTxt').value;
    // 获取Page1里id为labelTxt的标签内容
    const labelValue = contentFrame.document.getElementById('labelTxt').textContent;
    
    // 这里可以打印查看值，或者做你需要的逻辑处理
    console.log('文本框的值：', inputValue);
    console.log('标签的内容：', labelValue);
    
    // 比如你要跳转并携带值的话，可以这么写
    // window.location.href = 'target.jsp?inputVal=' + encodeURIComponent(inputValue);
}
</script>

⚠️ 注意：这种方式必须满足同源策略——两个页面要在同一个域名、协议、端口下，不然浏览器会阻止跨域访问哦。

场景2：menu.jsp是Page1.jsp的一部分（比如内嵌导航） #

如果menu是直接嵌入在Page1页面里的（比如用<%@ include file="menu.jsp" %>引入），那直接用JS访问当前页面的元素就行，完全不用跨页面操作。

比如Page1.jsp的结构：

<%@ include file="menu.jsp" %>
<!-- Page1的内容区域 -->
<input type="text" id="inputTxt" placeholder="请输入内容">
<label id="labelTxt">这是一个测试标签</label>

然后menu.jsp里的链接点击事件可以这么写：

<a href="#" onclick="getCurrentPageValue(); return false;">获取当前页面的值</a>

<script>
function getCurrentPageValue() {
    const inputVal = document.getElementById('inputTxt').value;
    const labelVal = document.getElementById('labelTxt').textContent;
    
    console.log('输入框值：', inputVal);
    console.log('标签内容：', labelVal);
    // 后续逻辑比如提交表单、跳转等都可以在这里处理
}
</script>

场景3：点击menu链接跳转到Page1.jsp，需要获取之前的输入值 #

如果是从menu页面跳转回Page1，想要保留用户之前在Page1里输入的值，那得把值先存起来，常见的方式有这两种：

方式A：用LocalStorage本地存储 #

在Page1.jsp里，监听输入框的变化，把值存在本地存储里，页面加载时再恢复：

<input type="text" id="inputTxt" oninput="saveInputValue()">
<label id="labelTxt">固定标签内容</label>

<script>
// 页面加载时，恢复之前保存的值
window.onload = function() {
    const savedVal = localStorage.getItem('page1Input');
    if (savedVal) {
        document.getElementById('inputTxt').value = savedVal;
    }
}

// 输入时保存值到LocalStorage
function saveInputValue() {
    const inputVal = document.getElementById('inputTxt').value;
    localStorage.setItem('page1Input', inputVal);
}
</script>

然后在menu.jsp的链接点击时，可以先读取本地存储的值：

<a href="Page1.jsp" onclick="readSavedValue();">跳转到Page1并查看历史值</a>

<script>
function readSavedValue() {
    const savedVal = localStorage.getItem('page1Input');
    console.log('Page1之前的输入值：', savedVal);
    // 也可以把值通过URL参数传递给Page1
    // window.location.href = 'Page1.jsp?val=' + encodeURIComponent(savedVal);
}
</script>

方式B：通过URL参数传递（适合临时场景） #

如果是从Page1跳转到menu页面时，就把值带在URL上，然后menu跳转回Page1时再传回去：

在Page1.jsp里的跳转链接：

<!-- 跳转时把输入框的值带在URL参数里 -->
<a href="menu.jsp?inputVal=${encodeURIComponent(inputTxt.value)}">跳转到菜单页面</a>

然后在menu.jsp里获取参数，再拼回到跳转链接中：

<% 
// 从URL参数里获取之前的输入值
String inputVal = request.getParameter("inputVal");
%>
<a href="Page1.jsp?val=<%= inputVal != null ? inputVal : "" %>">回到Page1并携带值</a>

最后在Page1.jsp里读取URL参数，填充到输入框：

<% 
String savedVal = request.getParameter("val");
%>
<input type="text" id="inputTxt" value="<%= savedVal != null ? savedVal : "" %>">

额外提醒 #

• 如果是跨域场景下需要跨iframe访问，那得用postMessage API，需要两个页面配合发送和接收消息。
• 敏感数据不要存在LocalStorage或Cookie里，建议存在服务器端的Session中，通过后端读取。

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