特别说明

由于iframe的特殊机制,在页面中使用iframe通常会伴生一些常见问题,主要表现为:

  1. iframe页面与父框架之间的通信(如跨框架传值,在iframe页面中打开主体框架的页签等)问题;
  2. 浏览器地址栏URL动态响应问题;
  3. 自定义弹层组件(及类弹层组件)的显示及通信问题。

iframe父子框架之间的通信问题可参考 JS 模块 中提供的方法,更为具体的示例(如跨框架传值)可参考示例的源代码。

URL动态响应

Admui-iframe 对地址栏的URL动态响应已经做了处理,主要表现为:

  1. 打开 iframe 页面时,地址栏URL根据 iframe 页面的URL动态变化;
  2. 通过URL可直接打开对应标签页。

弹层组件

通常来说,在当页面中引用的iframe没有占满当前页面时,在 iframe 中使用弹层组件(如自定义的模态框),会严重影响体验,如下图:

Admui示例1

Admui-iframe版本中,将弹层改为在最外层主体页面弹出,如下图:

Admui示例2

为了实现如上效果,Admui-iframe 对 Bootstrap 的 modal 插件及 Layer、Toastr 等插件做了优化。

Admui-iframe 对 Bootstrap 的 Modal 插件进行了优化,并增加了一些参数

参数

global (Boolean) : 默认为true,模态框在父框架中显示,为 false 时模态框在当前iframe框架中显示
page : 模态框中iframe页面的地址
pageHeight : 模态框中iframe高度

使用场景

  1. Modal 默认在主体框架中显示,如果您需要在内容页面(iframe)中显示,可以配置 global: false,也可以 data-api 使用,如:

    <button
    type="button"
    class="btn btn-primary"
    data-target="#modal-iframe"
    data-toggle="modal"
    data-global="false">
    在iframe中显示
    </button>
  2. Modal 中如果使用了第三方插件或自定义样式,建议以 iframe 的形式创建模态框,避免出现样式或插件文件在主体框架中出现找不到的情况。此时可以配合 pagepageHeight参数使用。可参考 模态框页面 示例页面中的 在模态框中显示IFRAME页面

Layer 弹层

  1. Layer 在主体框架或内容页面(iframe)中显示主要区别于使用哪个页面中的 layer 对象。我们在主体框架和内容页面中都引用了layer.js文件,需要Layer 弹层在主体框架显示时在iframe中使用 parent.layer 对象,需要layer弹层在内容页面显示时直接使用 layer 对象。
  2. Admui-iframe 增加了layer对 data-api 的简单支持,您可以在layer 弹层页面下方查看其示例。

Toastr 全局通知

Toastr 是一个消息提示的插件,Admui-iframe 对其进行了优化,让其始终在主体框架中显示。