替代jQuery 2.1.3中iframe的方案及AngularJS 1.4.5兼容问题

一、替换jQuery defaultDisplay函数中的iframe创建逻辑 #

原代码创建iframe是为了在无样式污染的环境下获取元素默认display值，可通过预定义HTML元素默认display映射表彻底替代，避免触发防火墙拦截：

修改步骤： #

1. 新增基于HTML标准的元素默认display映射对象：

// 预定义所有HTML元素的默认display值
const defaultDisplayMap = {
  "a": "inline",
  "abbr": "inline",
  "address": "block",
  "area": "none",
  "article": "block",
  "aside": "block",
  "audio": "inline-block",
  "b": "inline",
  "base": "none",
  "bdi": "inline",
  "bdo": "inline",
  "blockquote": "block",
  "body": "block",
  "br": "inline",
  "button": "inline-block",
  "canvas": "inline-block",
  "caption": "table-caption",
  "cite": "inline",
  "code": "inline",
  "col": "table-column",
  "colgroup": "table-column-group",
  "data": "inline",
  "datalist": "none",
  "dd": "block",
  "del": "inline",
  "details": "block",
  "dfn": "inline",
  "dialog": "block",
  "div": "block",
  "dl": "block",
  "dt": "block",
  "em": "inline",
  "embed": "inline",
  "fieldset": "block",
  "figcaption": "block",
  "figure": "block",
  "footer": "block",
  "form": "block",
  "h1": "block",
  "h2": "block",
  "h3": "block",
  "h4": "block",
  "h5": "block",
  "h6": "block",
  "head": "none",
  "header": "block",
  "hgroup": "block",
  "hr": "block",
  "html": "block",
  "i": "inline",
  "img": "inline-block",
  "input": "inline-block",
  "ins": "inline",
  "kbd": "inline",
  "label": "inline",
  "legend": "block",
  "li": "list-item",
  "link": "none",
  "main": "block",
  "map": "inline",
  "mark": "inline",
  "meta": "none",
  "meter": "inline-block",
  "nav": "block",
  "noscript": "block",
  "object": "inline-block",
  "ol": "block",
  "optgroup": "block",
  "option": "block",
  "output": "inline",
  "p": "block",
  "param": "none",
  "picture": "inline",
  "pre": "block",
  "progress": "inline-block",
  "q": "inline",
  "rp": "inline",
  "rt": "inline",
  "ruby": "inline",
  "s": "inline",
  "samp": "inline",
  "script": "none",
  "section": "block",
  "select": "inline-block",
  "small": "inline",
  "source": "none",
  "span": "inline",
  "strong": "inline",
  "style": "none",
  "sub": "inline",
  "summary": "block",
  "sup": "inline",
  "table": "table",
  "tbody": "table-row-group",
  "td": "table-cell",
  "template": "none",
  "textarea": "inline-block",
  "tfoot": "table-footer-group",
  "th": "table-cell",
  "thead": "table-header-group",
  "time": "inline",
  "title": "none",
  "tr": "table-row",
  "track": "none",
  "u": "inline",
  "ul": "block",
  "var": "inline",
  "video": "inline-block",
  "wbr": "inline"
};

2. 修改原defaultDisplay函数，移除iframe逻辑，直接从映射表取值：

function defaultDisplay( nodeName ) {
  var display = elemdisplay[ nodeName ];

  if ( !display ) {
    // 优先从预定义映射表获取（统一转为小写匹配）
    display = defaultDisplayMap[ nodeName.toLowerCase() ];
    
    // 可选：若映射表无对应值，保留原实际获取逻辑（不需要可删除）
    if ( !display ) {
      display = actualDisplay( nodeName, document );
    }

    // 存储结果到缓存
    elemdisplay[ nodeName ] = display;
  }

  return display;
}

核心优势： #

• 彻底规避iframe创建操作，不会触发防火墙拦截
• 执行效率更高，无需动态DOM操作和跨文档交互
• 基于HTML标准定义，结果准确无样式污染

二、AngularJS 1.4.5的jQuery版本依赖说明 #

1. 官方兼容版本：AngularJS 1.4.5官方支持的jQuery版本为 1.6.4及以上的1.x系列，以及 2.1.x及以上的2.x系列。
2. 与最新jQuery版本的兼容性：
   • 不建议直接搭配jQuery 3.x及以上版本，因为jQuery 3.x重构了Deferred等核心API，移除了部分旧方法，AngularJS 1.4.5的内部逻辑依赖旧版API，可能出现异步操作异常、DOM指令失效等问题。
   • 若必须升级，优先选择jQuery 3.0~3.2.x版本（兼容性相对较好），但需全面测试数据绑定、AJAX、自定义指令等核心功能，排查潜在冲突。

内容的提问来源于stack exchange，提问作者TechTurtle