父页面如何正确传递js变量给子页面访问？

父页面访问子页面JS变量：

背景介绍

在Web开发过程中,我们经常会遇到父页面和子页面之间的数据交互，在这种情况下，如何让父页面访问子页面的JS变量成为一个常见问题，本文将详细介绍父页面访问子页面JS变量的方法，并给出相应的示例代码。

方法一：通过全局变量

在子页面中定义全局变量

在子页面中,我们可以通过在全局作用域下定义变量来实现父页面访问子页面的JS变量，具体代码如下：

// 子页面
window.myVar = "子页面变量";

在父页面中访问子页面变量

在父页面中,我们可以通过访问子页面的window对象来获取子页面的全局变量，具体代码如下：

// 父页面
var myVar = window.open("子页面地址").myVar;
console.log(myVar); // 输出：子页面变量

方法二：通过自定义事件

在子页面中发布自定义事件

在子页面中,我们可以通过发布自定义事件的方式将变量传递给父页面，具体代码如下：

// 子页面
var myVar = "子页面变量";
window.addEventListener("customEvent", function() {
    var event = new CustomEvent("customEvent", {
        detail: myVar
    });
    window.parent.dispatchEvent(event);
});

在父页面中监听自定义事件

在父页面中,我们可以通过监听自定义事件来获取子页面传递的变量，具体代码如下：

// 父页面
window.addEventListener("customEvent", function(event) {
    var myVar = event.detail;
    console.log(myVar); // 输出：子页面变量
});

方法三：通过URL参数

在子页面中设置URL参数

在子页面中,我们可以通过修改URL参数的方式将变量传递给父页面，具体代码如下：

// 子页面
var myVar = "子页面变量";
window.location.search = "?myVar=" + encodeURIComponent(myVar);

在父页面中获取URL参数

在父页面中,我们可以通过解析URL参数来获取子页面传递的变量，具体代码如下：

// 父页面
var params = new URLSearchParams(window.location.search);
var myVar = params.get("myVar");
console.log(myVar); // 输出：子页面变量

FAQs

问题：父页面和子页面在不同的域名下，如何实现变量传递？

解答：在这种情况下，我们可以使用iframe来承载子页面，并通过iframe的contentWindow属性来访问子页面的变量。

问题：父页面和子页面之间需要频繁传递变量，哪种方法效率更高？

解答：对于频繁传递变量的场景，使用自定义事件或URL参数的方法更为高效，自定义事件可以在父页面和子页面之间建立实时通信，而URL参数则可以避免频繁的页面刷新。