javascript实现网页子页面遍历回调的方法（涉及 window.frames、递归函数、函数上下文）

当一个网页页面中存在子层级嵌套时，我们可能需要遍历所有子页面的元素，进行一些操作。该过程涉及到javascript的window.frames对象、递归函数以及函数上下文的概念。下面是详细讲解及代码示例。

1. window.frames对象

window.frames属性可以用来访问当前窗口或框架的 iframe 对象。它返回一个对象，包含了当前窗口中的所有框架。可以通过这个对象来访问嵌套在当前窗口中的其他页面，进而进行页面元素的操作。

2. 递归函数

递归函数指的是在函数内部调用自身的函数。在遍历子页面时，我们可以通过递归函数来实现对所有子页面的遍历。当函数内部遇到子页面时，我们可以通过递归函数再次调用该函数，对子页面进行相同的遍历操作，直到所有的子页面都被遍历完成。

3. 函数上下文

函数上下文指的是函数内部的this关键字。在遍历子页面时，我们可能需要在函数内部使用this关键字，来进行当前页面元素的操作。但是使用递归函数时，this关键字的引用可能会与其它层级混淆。这时我们可以通过函数上下文的方式来保存当前环境的this，避免出现混淆。

示例 1：

下面是示例代码，用递归函数遍历所有子页面中的元素，给所有a标签添加一个class属性：

// 定义遍历函数
function traverseFrames(win) {
  // 保存当前函数上下文
  var self = this;
  // 获取当前frame对象中的所有元素
  var elements = win.document.getElementsByTagName('*');
  // 遍历元素
  for (var i = 0; i < elements.length; i++) {
    var element = elements[i];
    // 如果元素是一个a标签，则添加class属性
    if (element.nodeName.toLowerCase() === 'a') {
      element.classList.add('my-class');
    }
    // 如果元素是一个frame框架，则递归调用遍历函数
    if (element.nodeName.toLowerCase() === 'iframe') {
      traverseFrames.call(self, element.contentWindow);
    }
  }
}

// 调用遍历函数
traverseFrames(window);

在上述示例代码中，我们首先定义了一个遍历函数traverseFrames，该函数接受一个win参数，表示当前遍历的frame对象。在函数内部，我们通过getElementsByTagName方法获取当前frame对象中的所有元素，并遍历这些元素。当遇到一个a标签时，我们给其添加一个名为my-class的class属性。

接着，在遍历元素时，如果遇到一个frame框架，则调用递归函数，将当前元素的contentWindow参数作为新的win参数传入。

通过递归调用遍历函数，我们可以遍历所有层级的子页面，对其中的a标签添加class属性。

示例 2：

下面是一个更加复杂的示例代码。该代码通过遍历子页面，获取子页面中的所有input元素，并将这些元素的value值拼接成一个字符串返回。

// 定义遍历函数
function traverseFrames(win) {
  // 保存当前函数上下文
  var self = this;
  // 定义存储input值的数组
  var values = [];
  // 获取当前frame对象中的所有元素
  var elements = win.document.getElementsByTagName('*');
  // 遍历元素
  for (var i = 0; i < elements.length; i++) {
    var element = elements[i];
    // 如果元素是一个input标签，则将其value值加入数组
    if (element.nodeName.toLowerCase() === 'input') {
      values.push(element.value);
    }
    // 如果元素是一个frame框架，则递归调用遍历函数，并将结果存入数组
    if (element.nodeName.toLowerCase() === 'iframe') {
      var result = traverseFrames.call(self, element.contentWindow);
      values.push(result);
    }
  }
  // 将数组中的所有值拼接成一个字符串，作为返回值
  return values.join(',');
}

// 调用遍历函数
var result = traverseFrames(window);
console.log(result); // 输出所有子页面中的input元素的value值

在该示例代码中，我们同样定义了一个遍历函数traverseFrames，该函数接受一个win参数，表示当前遍历的frame对象。在函数内部，我们通过getElementsByTagName方法获取当前frame对象中的所有元素，并遍历这些元素。当遇到一个input标签时，我们将其value值加入一个名为values的数组中。此外，当遇到一个frame框架时，我们同样递归调用遍历函数，并将递归函数的结果存入values数组中。

最后，我们将values数组中的所有值拼接成一个字符串，并将这个字符串作为函数的返回值。

通过遍历子页面并返回所有input元素的value值，我们可以在父页面中获取所有子页面的表单数据。

以上就是关于“javascript实现网页子页面遍历回调的方法”的详细攻略。