浅谈js中子页面父页面方法 变量相互调用

浅谈JS中子页面父页面方法变量相互调用

在前端开发中，经常会涉及到页面嵌套的问题，比如一个主页面嵌套多个子页面。在这样的情况下，子页面需要实现某些功能，需要调用主页面的方法或者获取主页面的变量。下面将通过两个示例详细讲解JS中子页面和父页面方法变量相互调用的方法。

示例一

在该示例中，页面A嵌套了页面B。我们需要在页面B中调用页面A中的方法。

首先，在页面A中需要定义一个方法供页面B调用。方法的定义方式如下所示：

function funcA() {
  //A页面中的方法
  console.log("funcA");
}

接下来，在页面B中需要获取页面A的DOM对象，以便调用页面A中的方法。获取方法如下：

var fa = parent.document.getElementById("frameA");

其中，frameA是页面A中的iframe标签的id。

获取页面A的DOM对象之后，就可以通过DOM对象来调用A页面中的方法，实现代码如下所示：

fa.contentWindow.funcA();//调用页面A中的方法

示例二

在该示例中，页面A嵌套了页面B和页面C。我们需要在页面C中获取页面B中的变量。

页面B中需要定义一个全局变量，代码如下所示：

var variableB = "variable in frameB";

接下来，在页面C中需要获取页面B中的变量。获取方法如下：

var fb = parent.document.getElementById("frameB");
var v = fb.contentWindow.variableB;//获取页面B中的变量

其中，frameB是页面B中的iframe标签的id。

获取到页面B中的变量之后，就可以使用这个变量了。在本示例中，我们将获取到的变量通过console.log打印输出，代码如下所示：

console.log(v);//输出：variable in frameB

总结

通过本文的两个示例，我们了解了如何在JS中实现子页面和父页面方法变量相互调用。在实际开发中，这一技术经常会用到，希望以上内容能够对读者有所帮助。