我们的系统有个公用的弹出框,弹出框html结构是在顶层页面里的。一般弹出框里的内容,单独做个页面,嵌入iframe里面。就可以在弹出框里显示要显示的内容。但是出现一个问题是,有时候弹出框里的操作不是单一的,就像这次的操作。在弹出框里有个分拣操作,这个操作力选中目标文件夹的时候又有一个新建文件夹的操作。选择新建文件夹-新建文件夹成功后,还需要返回到分拣操作的界面。这么交互的操作在弹出框里是比较麻烦的。所以选择了一种方法,在一个html里面又包含两个iframe,分别包含分拣操作的页面和新建分组页面。新建分组页面初始化的时候,实现了input输入框聚焦。但是后来发现了个缺陷。从分拣操作页面跳到新建文件夹页面的时候,输入框无法聚焦,只有重新刷新后才能聚焦。后来发现,这两个iframe包含在上层的iframe里面。加载上层Iframe的时候,新建文件夹的页面初始化工作已经完成,只是页面处于隐藏的状态,这个时候将这个页面从隐藏状态切换到显示状态,input聚焦就有问题。
所以在显示新建文件夹页面的时候要重新调用它的页面初始化函数(注:可以reload,刷新这个页面,但是这样会慢些)。
页面结果:
<div class="wTipCont">
<div id="forWinSetFilter" for="forWinSetFilter">
<iframe src="/setfilter.htm?name=142312312&email=142312312@rd139.com" id="setFilterFrame" name="setFilterFrame" frameborder="0" scrolling="no" style="width:100%;height:165px;"></iframe>
<iframe src="/setfiltersuc.htm" id="setfiltersuc" name="setfiltersuc" frameborder="0" scrolling="no" style="width:100%;height:120px; display:none;"></iframe>
<iframe src="/addfolderforcreatefilter.htm" id="newFilterFrame" name="newFilterFrame" frameborder="0" scrolling="no" style="width:100%;height:151px; display:none;"></iframe>
<ul id="filterToFloders" class="toolBar_listMenu listMenu_bar" style=" position: absolute; z-index: 1109;display:none; width:205px; width:206px\0; *width:206px;top: 103px;left: 61px;border: 1px solid #b1b1b1;padding: 2px 0;">
<li id="1" f_name="收件箱"><a href="javascript:void(0);" style="width:205px;"><span>收件箱</span></a></li>
<li id="addFloder"><a href="javascript:void(0);" style="width:205px;"><span>新建文件夹</span></a></li>
</ul>
</div>
</div>
$("#setFilterFrame",parent.document).hide();
//window.parent.frames["newFilterFrame"].location.reload();//重新绑定parentFloderUl-li的click事件
$("#newFilterFrame",parent.document).show();
//页面初始化 及修改弹出框标题
window.parent.frames["newFilterFrame"].Init();//重新初始化新建文件夹页面 改Init()函数里面,对新建文件夹页面的输入框聚焦进行了绑定。
有点像白话。记录下自己遇到的问题。
后面发现新的方法:
在新打开页面的时候,把iframe的id带过去
字页面里就很容易获取iframe里的内容。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· PPT革命!DeepSeek+Kimi=N小时工作5分钟完成?
· What?废柴, 还在本地部署DeepSeek吗?Are you kidding?
· DeepSeek企业级部署实战指南:从服务器选型到Dify私有化落地
· 程序员转型AI:行业分析
· 重磅发布!DeepSeek 微调秘籍揭秘,一键解锁升级版全家桶,AI 玩家必备神器!