问题场景:
1) 现有页面A、页面B;页面A属于外层页面,里面有iframe标签;页面B是放在iframe里面加载的页面;
2)很多公共js函数是在页面A定义引入的,在调用这些公共js函数的时候,历史代码都是用window.top.xxxfun去调用的;页面A和页面B都有调用;
3)现在页面A又要嵌入到另一个页面P的iframe里面;
4)A嵌入到P之后,A和B页面使用window.top.xxxfun去调用A的公共函数就会调用不到。因为window.top指向的不再是A,而是P。
解决思路:
1) 改掉页面A和B中所有的window.top引用,将绝对改为相对,即在A页面中时使用window.self,在B页面中时使用window.parent ;
2) 思路有了但是实现的时候又有了大问题,因为使用window.top的地方太多了,如果按照1)中的方法,那么每个在替换时都要分析应该改成self还是parent,太费时费力;
3)当然,往往像这种笨方法解决的问题,大都可以用简便的方法实现,既然上面的痛点是在替换时要分析替换目标,那么如果能动态自动识别替换不就ok了吗
4)于是探索了动态自动识别替换的方法,请看下面的核心代码;
核心代码:
说明:
i_right 是页面A中iframe标签的id值;
function exTop(){ var _a_def_ifrObj = undefined; try{ _a_def_ifrObj = window.top.document.getElementById("i_right"); }catch(e){} if(!!_a_def_ifrObj ){ return window.top; }else{ var _a_def_ifrObj2 = undefined; try{ _a_def_ifrObj2 = document.getElementById("i_right"); }catch(e){} if(!!_a_def_ifrObj2 ){ return window.self; }else{ return window.parent; } } }
将 window.top.xxxxfun(); 改为 (exTop()).xxxxfun();