zoukankan      html  css  js  c++  java
  • 多个iframe的刷新问题

    我们的系统有个公用的弹出框,弹出框html结构是在顶层页面里的。一般弹出框里的内容,单独做个页面,嵌入iframe里面。就可以在弹出框里显示要显示的内容。但是出现一个问题是,有时候弹出框里的操作不是单一的,就像这次的操作。在弹出框里有个分拣操作,这个操作力选中目标文件夹的时候又有一个新建文件夹的操作。选择新建文件夹-新建文件夹成功后,还需要返回到分拣操作的界面。这么交互的操作在弹出框里是比较麻烦的。所以选择了一种方法,在一个html里面又包含两个iframe,分别包含分拣操作的页面和新建分组页面。新建分组页面初始化的时候,实现了input输入框聚焦。但是后来发现了个缺陷。从分拣操作页面跳到新建文件夹页面的时候,输入框无法聚焦,只有重新刷新后才能聚焦。后来发现,这两个iframe包含在上层的iframe里面。加载上层Iframe的时候,新建文件夹的页面初始化工作已经完成,只是页面处于隐藏的状态,这个时候将这个页面从隐藏状态切换到显示状态,input聚焦就有问题。

    所以在显示新建文件夹页面的时候要重新调用它的页面初始化函数(注:可以reload,刷新这个页面,但是这样会慢些)。

    页面结果:

    <div class="wTipCont">

    <div id="forWinSetFilter" for="forWinSetFilter">

    <iframe src="/setfilter.htm?name=142312312&amp;email=142312312@rd139.com" id="setFilterFrame" name="setFilterFrame" frameborder="0" scrolling="no" style="100%;height:165px;"></iframe>

    <iframe src="/setfiltersuc.htm" id="setfiltersuc" name="setfiltersuc" frameborder="0" scrolling="no" style="100%;height:120px; display:none;"></iframe>

    <iframe src="/addfolderforcreatefilter.htm" id="newFilterFrame" name="newFilterFrame" frameborder="0" scrolling="no" style="100%;height:151px; display:none;"></iframe>

    <ul id="filterToFloders" class="toolBar_listMenu listMenu_bar" style=" position: absolute; z-index: 1109;display:none; 205px; 206px\0; *206px;top: 103px;left: 61px;border: 1px solid #b1b1b1;padding: 2px 0;">

    <li id="1" f_name="收件箱"><a href="javascript:void(0);" style="205px;"><span>收件箱</span></a></li>

    <li id="addFloder"><a href="javascript:void(0);" style="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里的内容。

     

     

  • 相关阅读:
    18-行列式及其性质
    17-正交矩阵和Gram-Schmidt正交化
    14-正交向量与子空间
    centOS7.3 离线安装docker
    10-四个基本子空间
    使用vim打造python-ide
    09-线性相关性、基、维数
    python小实例
    Elasticsearch学习之ES节点类型以及各种节点的分工
    基于Kibana和ES的苏宁实时日志分析平台
  • 原文地址:https://www.cnblogs.com/ievy/p/2703994.html
Copyright © 2011-2022 走看看