js怎么获得另一个界面的值

在JavaScript中，获得另一个界面的值的常见方法包括：使用window.open和window.opener、使用localStorage、sessionStorage、以及postMessage。 其中，window.open和window.opener方法是最直接的方式，允许一个页面通过打开另一个页面并与其进行交互来获取值。具体来说，当一个页面通过window.open打开另一个页面时，可以通过window.opener对象访问打开该页面的父页面。下面我将详细介绍这种方法。

使用window.open和window.opener获取另一个界面的值

当一个页面通过window.open方法打开另一个页面时，可以通过window.opener对象访问打开该页面的父页面。以下是一个简单的示例：

<!DOCTYPE html>
<html>
<head>
    <title>Parent Page</title>
</head>
<body>
    <h1>Parent Page</h1>
    <input type="text" id="parentInput" value="This is a value from the parent page">
    <button onclick="openChildPage()">Open Child Page</button>
    <script>
        function openChildPage() {
            window.open('child.html', 'childWindow', 'width=400,height=400');
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>Child Page</title>
</head>
<body>
    <h1>Child Page</h1>
    <button onclick="getValueFromParent()">Get Value from Parent Page</button>
    <div id="valueDisplay"></div>
    <script>
        function getValueFromParent() {
            const parentValue = window.opener.document.getElementById('parentInput').value;
            document.getElementById('valueDisplay').innerText = parentValue;
        }
    </script>
</body>
</html>

在这个例子中，当点击“Open Child Page”按钮时，父页面会打开一个新的子页面。子页面中点击“Get Value from Parent Page”按钮时，子页面通过window.opener对象访问父页面的输入框值，并将其显示在子页面中。

一、使用`localStorage`和`sessionStorage`

1、localStorage

localStorage是一个持久化的存储方式，数据在浏览器关闭后仍然存在。可以使用localStorage在不同页面之间共享数据：

// 在父页面中设置值
localStorage.setItem('sharedValue', 'This is a shared value');
// 在子页面中获取值
const sharedValue = localStorage.getItem('sharedValue');
console.log(sharedValue);

2、sessionStorage

sessionStorage类似于localStorage，但数据在页面会话结束时被清除。可以使用sessionStorage在不同页面之间共享数据，但仅在同一会话期间有效：

// 在父页面中设置值
sessionStorage.setItem('sharedValue', 'This is a session-based shared value');
// 在子页面中获取值
const sharedValue = sessionStorage.getItem('sharedValue');
console.log(sharedValue);

二、使用`postMessage`方法

postMessage方法允许来自不同源的窗口间进行安全的通信。以下是一个示例：

父页面

<!DOCTYPE html>
<html>
<head>
    <title>Parent Page</title>
</head>
<body>
    <h1>Parent Page</h1>
    <button onclick="openChildPage()">Open Child Page</button>
    <script>
        let childWindow;
        function openChildPage() {
            childWindow = window.open('child.html', 'childWindow', 'width=400,height=400');
        }
        window.addEventListener('message', function(event) {
            if (event.origin !== window.location.origin) {
                return;
            }
            alert('Received message from child: ' + event.data);
        });
    </script>
</body>
</html>

子页面

<!DOCTYPE html>
<html>
<head>
    <title>Child Page</title>
</head>
<body>
    <h1>Child Page</h1>
    <button onclick="sendMessageToParent()">Send Message to Parent</button>
    <script>
        function sendMessageToParent() {
            window.opener.postMessage('Hello from child page', window.location.origin);
        }
    </script>
</body>
</html>

在这个示例中，父页面通过window.open方法打开子页面。子页面通过window.opener.postMessage方法向父页面发送消息。父页面通过window.addEventListener('message', ...)方法监听来自子页面的消息，并在接收到消息时进行处理。

三、使用URL参数

通过URL参数传递数据也是一种常见的方法：

父页面

<!DOCTYPE html>
<html>
<head>
    <title>Parent Page</title>
</head>
<body>
    <h1>Parent Page</h1>
    <button onclick="openChildPage()">Open Child Page</button>
    <script>
        function openChildPage() {
            const param = encodeURIComponent('This is a value passed via URL');
            window.open('child.html?value=' + param, 'childWindow', 'width=400,height=400');
        }
    </script>
</body>
</html>

子页面

<!DOCTYPE html>
<html>
<head>
    <title>Child Page</title>
</head>
<body>
    <h1>Child Page</h1>
    <div id="valueDisplay"></div>
    <script>
        function getQueryParam(param) {
            const urlParams = new URLSearchParams(window.location.search);
            return urlParams.get(param);
        }
        const value = getQueryParam('value');
        document.getElementById('valueDisplay').innerText = value;
    </script>
</body>
</html>

在这个示例中，父页面通过URL参数将数据传递给子页面。子页面解析URL参数并显示传递的数据。

四、使用Cookie

虽然不推荐，但仍可以使用Cookie在页面之间共享数据：

父页面

// 设置Cookie
document.cookie = "sharedValue=This is a shared value; path=/";

子页面

// 获取Cookie
function getCookie(name) {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) return parts.pop().split(';').shift();
}
const sharedValue = getCookie('sharedValue');
console.log(sharedValue);

在这个示例中，父页面设置一个Cookie，子页面读取该Cookie。

以上是几种常见的在JavaScript中获取另一个界面值的方法。每种方法都有其适用的场景和限制，选择合适的方法可以提高代码的可维护性和安全性。