在Web开发中，跨页面实现JavaScript（JS）方法调用是一个常见的需求。这通常涉及到不同页面之间的通信，可能是同一域下的不同页面，也可能是跨域的情况。以下是一些实用的技巧，帮助你实现跨页面JS方法调用。

一、同源策略

首先，我们需要了解浏览器的同源策略。同源策略是浏览器的一种安全机制，它限制了来自不同源的文档或脚本如何与当前文档交互。所谓“同源”是指协议（http、https）、域名和端口完全相同。

1.1 同源下的跨页面通信

  • 使用window.postMessage方法：这是实现跨页面通信最直接的方法。通过window.postMessage，可以安全地在不同的窗口之间发送消息。
  // 发送消息
  window.parent.postMessage('Hello, parent!', 'http://parent.com');

  // 接收消息
  window.addEventListener('message', function(event) {
    if (event.origin === 'http://parent.com') {
      console.log('Received message:', event.data);
    }
  });
  • 使用localStorage或sessionStorage：通过在localStorage或sessionStorage中存储数据，可以在不同页面间共享数据。
  // 在子页面设置数据
  localStorage.setItem('key', 'value');

  // 在父页面读取数据
  console.log(localStorage.getItem('key'));

1.2 跨域下的跨页面通信

  • 使用CORS（跨源资源共享）：通过设置CORS头部，允许来自不同源的请求访问资源。
  // 在服务器端设置CORS头部
  Access-Control-Allow-Origin: http://child.com
  • 使用代理服务器：通过设置一个代理服务器，将请求转发到目标服务器，从而绕过同源策略。

二、事件监听与触发

  • 使用window.addEventListener和window.dispatchEvent：在父页面和子页面之间，可以通过事件监听和触发的方式实现通信。
  // 在父页面
  const event = new CustomEvent('myEvent', { detail: 'Hello, child!' });
  window.dispatchEvent(event);

  // 在子页面
  window.addEventListener('myEvent', function(event) {
    console.log('Received event:', event.detail);
  });

三、总结

跨页面实现JS方法调用是一个涉及浏览器安全策略和编程技巧的问题。通过理解同源策略和运用上述技巧，你可以有效地实现跨页面通信。在实际开发中，选择合适的方案需要根据具体需求和环境来决定。