iframe嵌套top问题解决方案

小郝不负流年
小郝不负流年   + 关注
2020-10-28 11:40:21   阅读215   评论0

问题场景:

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();


对我有用,我要     转载  
文章分类: Web前端  
所属标签: iframe  
  • 0条评论
  • 只看作者
  • 按时间|按热度
  • 由于本人多次涉及需要打印这个证明,而每次都会忘记入口,在网上各种搜索各种摸索很是浪费时间。故本次将操作流程整理记录下来,以备忘。同时也分享给大家。1、打开湖北政务服务网,地址:http://zwfw.hubei.gov.cn/s/index.html2、切换区域到“武汉市”3、在“特色服务”模块找到“(个人)武汉市社会保险公共服务平台”4、进入“(个人)武汉市社会保险公共服务平台”,登录账号密码<imgsrc="https://cdnstatic.hoscen.cn/blog/article/184053017752895488/img/497065960be44747825acb86a17483c1.png"style=
  • 如何使用postman模拟http发送xml参数报文的POST请求?1、postman工具通过安装软件或使用谷歌插件都可以,这里不再赘述。2、配置postman,选择POST,填写URL;切换到Headers,添加Content-Type:text/xml 3、切换到body,选择raw,XML,下方填写你的请求报文4、点击Send发送请求,如图可以看到响应状态、时间、结果等信息5、讲到这里就结束了,是不是学会了?快去试试吧!
  • Failedtoloadprojectconfiguration:cannotparsefileF:/xx/.idea/modules.xml:ParseErrorat[row,col]:[1,1]Message:文件提前结束。解决办法:关闭idea,删掉这个文件,重新打开idea
  • 很多时候我们需要Linux服务器定时去运行一个脚本来触发一个操作,比如写缓存数据到硬盘、定时备份、定时重启服务、定期清除日志等。下面就简单讲解一下Linuxcrontab命令如何实现自动循环执行shell脚本。一、准备shell脚本比如我们准备一个hello.shvim/hcn/sh/hello.sh#!/bin/bash  DATETIME=$(date"+%Y%m%d%H%M%S") echo"hello, www.hoscen.cn,时间:${DATETIME}"  通过chmod命令赋予该脚本的执行权限chmod755hello.sh测试正确性二、开启crontab服务 linux应该都有crontab,没有的话可以安装一下:yuminstall vixie-cronyuminstall crontabsvixie-cron软
  • 目录:1、安装node.js环境2、安装cnpm3、安装vue-cli脚手架构建工具4、用vue-cli构建项目5、安装项目所需的依赖6、项目运行7、项目打包1、安装node.js环境下载地址:https://nodejs.org/zh-cn/安装过程没有太多好说的,安装完成后 win+R打开命令行输入node -v , 如图,出现版本号说明安装成功。npm包管理器是集成在node中的 , npm -v可以查看版本2、安装cnpm由于有些npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时
  • 下载地址:https://adoptopenjdk.net/releases.html?variant=openjdk8&jvmVariant=hotspot选择文件类型:或者,你可以通过我的百度网盘分享直接获取:链接:https://pan.baidu.com/s/1UygOdTh6WNZyS5WP_API6w 提取码:phnh 注意:我这里是下载的32的jdk,你们如果要64位请下载64的。使用:使用上和OracleJDK使用上是没有区别的。区别:1.OracleJDK⼤概每6个⽉发⼀次主要版本,⽽OpenJDK版本⼤概每三个⽉发布⼀次。但这不是固定的,我觉得了解这个没啥⽤处。详情参⻅:https://blogs.oracle.com/java-platform-group/update-and-faq-on-the-java-se-release-cadence。 2.OpenJDK是⼀个参考模型并且是完全开源的,⽽OracleJDK是OpenJDK的⼀个实现,并不是完全开源的; 3.OracleJDK⽐OpenJDK更稳定。OpenJDK和OracleJDK的代码⼏乎相同,但OracleJDK有更多的类和⼀些错误修复。因此,如果您
  • 一般我们在使用CDN时都设置有缓存时间,当源站资源发生变更后,如果缓存时间没到,那么用户访问的依旧是变更前的数据,虽说又拍云控制台提供了缓存刷新功能界面,但是每次都手动去刷新显示不太理想,当然又拍云也想到了这一点,提供给我们有API可以调用。本篇文章就是讲解如何接入又拍云缓存刷新API。网站免费接入又拍云CDN的方法,请查看我另外一篇文章,地址: https://www.hoscen.cn/blog/hao/articles/204022774975430656.html又拍云API文档:https://api.upyun.com/doc#/api/guide/overview看完文档,我们会知道又拍云提供有两个缓存刷新接口,一个支持通配符(但次数有限),一个是完整url刷新。同时注意调用接口时将 Token 放入 HTTP Header 中 。那么我们需要3个接口:1、获取token2、URL刷新3、缓存批量刷新详细请求参数和响应值请查看文档。话不多说,我们直接放上核心代码1、获取token2、URL刷新<img src="https://cdnstatic.hoscen.cn/blog/article/
  • 本文讲触发el-dialog前动态修改窗口title的方法。1、el-dialog添加title属性el-dialog :title="titleType+'菜单'" :visible.sync="dialogVisible" width="800px" >el-dialog>  2、初始化变量(titleType,名称自己定义)export&
  • 建立服务器内网其他IP端口的隧道,可以将远程的服务映射到本地进行访问。finalshell配置隧道方法:
  • SQL计算日期相差多少分钟,示例SELECT  ROUND(TO_NUMBER(to_date(rs.t_cap_wf_finReq_start_date,'YYYY/MM/DDhh24:mi:ss')-to_date(rs.t_cap_wf_start_date,'YYYY/MM/DDhh24:mi:ss'))*24*60) FROM table_xxx 更多差值单位写法天:ROUND(TO_NUMBER(END_DATE-START_DATE))小时:ROUND(TO_NUMBER(END_DATE-START_DATE)*24)分钟:ROUND(TO_NUMBER(END_DATE-START_DATE)*24*60)秒:ROUND(TO_NUMBER(END_DATE-START_DATE)*24*60*60)毫秒:ROUND(TO_NUMBER(END_DATE-START_DATE)*24*60*60*1000)