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


Posted in Javascript onJuly 27, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
IE与Firefox下javascript getyear年份的兼容性写法
Dec 20 Javascript
js 父窗口控制子窗口的行为-打开,关闭,重定位,回复
Apr 20 Javascript
基于jquery的一个浮动框(扩展性比较好 )
Aug 27 Javascript
javascript去除字符串中所有标点符号和提取纯文本的正则
Jun 07 Javascript
整理Javascript事件响应学习笔记
Dec 02 Javascript
早该知道的7个JavaScript技巧
Jun 21 Javascript
浅析Javascript的自动分号插入(ASI)机制
Sep 29 Javascript
JS动态添加选项案例分析
Oct 17 Javascript
AngularJS指令与控制器之间的交互功能示例
Dec 14 Javascript
简单实现bootstrap导航效果
Feb 07 Javascript
Vue.js 中的 $watch使用方法
May 25 Javascript
基于ts的动态接口数据配置的详解
Dec 18 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
Jul 27 #Javascript
使用HTML+CSS+JS制作简单的网页菜单界面
Jul 27 #Javascript
Javascript验证Visa和MasterCard信用卡号的方法
Jul 27 #Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
Jul 27 #Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
Jul 27 #Javascript
JavaScript动态提示输入框输入字数的方法
Jul 27 #Javascript
JQUERY实现网页右下角固定位置展开关闭特效的方法
Jul 27 #Javascript
You might like
基于ubuntu下nginx+php+mysql安装配置的具体操作步骤
2013/04/28 PHP
PHP中filter函数校验数据的方法详解
2015/07/31 PHP
PHP实现随机数字、字母的验证码功能
2018/08/01 PHP
JS中style属性
2006/10/11 Javascript
为javascript添加String.Format方法
2020/08/11 Javascript
基于jQuery实现左右div自适应高度完全相同的代码
2012/08/09 Javascript
javascript限制文本框只允许输入数字(曾经与现在的方法对比)
2013/01/18 Javascript
Javascript写入txt和读取txt文件示例
2014/02/12 Javascript
jquery中show()、hide()和toggle()用法实例
2015/01/15 Javascript
javascript实现多级联动下拉菜单的方法
2015/02/06 Javascript
chrome不支持form.submit的解决方案
2015/04/28 Javascript
网页从弹窗页面单选框传值至父页面代码分享
2015/09/29 Javascript
jQuery中get方法用法分析
2016/12/07 Javascript
js常用DOM方法详解
2017/02/04 Javascript
认识less和webstrom的less配置方法
2017/08/02 Javascript
微信小程序视图template模板引用的实例详解
2017/09/20 Javascript
jquery鼠标悬停导航下划线滑出效果
2017/09/29 jQuery
从零开始搭建webpack+react开发环境的详细步骤
2018/05/18 Javascript
微信小程序仿微信运动步数排行(交互)
2018/07/13 Javascript
详解js删除数组中的指定元素
2018/10/31 Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
2019/04/30 Javascript
vue-router的两种模式的区别
2019/05/30 Javascript
微信小程序实现原生步骤条
2019/07/25 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
2019/09/25 Javascript
javascript实现视频弹幕效果(两个版本)
2019/11/28 Javascript
Nodejs实现WebSocket代码实例
2020/05/19 NodeJs
Vue实现腾讯云点播视频上传功能的实现代码
2020/08/17 Javascript
python 连接sqlite及简单操作
2017/06/30 Python
Python使用LDAP做用户认证的方法
2019/06/20 Python
python django中8000端口被占用的解决
2019/12/17 Python
tensorflow保持每次训练结果一致的简单实现
2020/02/17 Python
Django choices下拉列表绑定实例
2020/03/13 Python
python利用xlsxwriter模块 操作 Excel
2020/10/14 Python
马来西亚排名第一的宠物用品店:Pets Wonderland
2020/04/16 全球购物
庆八一活动方案
2014/01/25 职场文书
创业计划书之冷饮店
2019/09/27 职场文书