웹 페이지 하위 페이지 순회 콜백을 구현하는 JavaScript 방법(window.frames, 재귀 함수, 함수 컨텍스트 포함)_javascript 기술

이 문서의 예에서는 JavaScript가 웹 페이지 하위 페이지 순회 콜백(window.frames, 재귀 함수 및 함수 컨텍스트 포함)을 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

직접 작성한 순수 JavaScript 도구 프로그램에서 추출한 것으로, 현재 웹페이지의 모든 하위 페이지를 순회하며 반복적인 콜백을 실행하는데 사용되며, 콜백 함수의 반환값을 결과 반환에 사용할 수 있어, 클로저 변수를 줄여보세요~

특징은 - 재귀 순회 시 서브페이지의 Window 객체만 가져오고, 콜백 함수는 바로 실행되지 않고, 검색이 완료된 후 일반 루프 구조로 다시 호출된다는 점입니다. 이를 통해 재귀 호출 중 메모리 소비를 최소화하고 프로그램 구조를 단순화하며 유지 관리를 쉽게 할 수 있습니다

전역 함수 Frame_Each( CallBack ):

(function (BOM) {
  function All_Frames(iWindow) {
    var _Frames_ = [].slice.call(iWindow.frames, 0);
    for (var i = 0; i < _Frames_.length; i++)
      _Frames_ = _Frames_.concat( arguments.callee(_Frames_[i]) );
    return _Frames_;
  }
  BOM.Frame_Each = function (CallBack) {
    var Frames = [this].concat( All_Frames(this) );
    if (! CallBack) return Frames;
    for (var i = 0, CBR; i < Frames.length; i++) {
      try { Frames[i].name; } catch (iError) { continue; }
      CBR = CallBack.apply(Frames[i], [].slice.call(arguments, 1));
      if (CBR === false) break;
      else if (CBR === undefined) continue;
      return CBR;
    }
  };
})(self);

사용 예:

// 无参数 —— 返回一个数组，包含函数调用所在的 Window 对象及其子页面的 Window，其顺序同递归遍历
var Pages = Frame_Each();
console.log( Pages.length );
// 定义回调 —— 回调返回值功能与普通循环语句的对应：
//  1. undefined：continue
//  2. false：break
//  3. 其它任何值：break && return Value
var Search_Result = Frame_Each(function () {
  var iFocus = this.document.activeElement;
  switch ( iFocus.tagName.toLowerCase() ) {
    case 'body':   return false;
    case 'iframe':  return;
  }
  return iFocus;
});
Search_Result.innerHTML = 'Hello, Focus!';

이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.