http://fuxiao.io/practice/docs/#/layui/layer/iframes

页面中的 iframe

iframe 用来在页面中加载另一个页面，HTML iframe 标签

部分新人在使用 layer 的 iframe 层的时候，在处理各个框架间的交互方面都会遇到各种各样的问题，其实是很简单的 HTML、JavaScript 基础知识点，但是每个点都描述出来就会占用很多篇幅。以下作简单讲解：

Window top 属性

页面中存在两个普通的 iframe 节点，iframeA 和 iframeB
<iframe src="iframeA.html" name="iframe_a" frameborder="0"></iframe>
<iframe src="iframeB.html" name="iframe_b" frameborder="0"></iframe>
这两个节点就属于同级，如果想在<当前页面>获取这两个 iframe 内的 window 对象
非常简单，<window[iframe 的 name 属性]> 即可，即：
<script type="text/javascript">
var iframeAWin = window['iframe_a'];
var iframeBWin = window['iframe_b'];
</script>

那假如我们现在的 JavaScript 代码在 iframeB 中，该如何获取到 iframeA 的 window 对象呢？
此时需要使用到 top，top 属性返回当前窗口的最顶层浏览器窗口，所以答案为
<script type="text/javascript">
// 此段代码处于 iframeB 页面中
var iframeAWin = top['iframe_a'];
</script>


场景1：layer iframe 层在普通的 iframe 中
此时我们在 iframeA 页面使用 layer.open 弹出一个 layer iframe 层,
并把 layer 的 index、layero 存储到 top
此时的 iframeC 是属于 iframeB 的
-----------
top
  iframeA
    iframeC（layer.open 弹出）
  iframeB
-----------

<script type="text/javascript">
// 此段代码处于 顶层（top） 页面中
var layerFrameConfig = {};
</script>
<script type="text/javascript">
// 此段代码处于 iframeA 页面中
layer.open({
  type: 2,
  content: 'iframeC.html',
  shade: false,
  success: function(layero, index) {
    top.layerFrameConfig.iframeC = {
      layer_index: index,
      layer_layero: layero
    }
  }
});
</script>

然后我们在 iframeB 中获取 iframeC 的 window 对象
<script type="text/javascript">
// 此段代码处于 iframeB 页面中
var lfc = top.layerFrameConfig;
var iframeAWin = top['iframe_a'];
var iframeCIndex = lfc.iframeC.layer_index;
var iframeCLayero = lfc.iframeC.layer_layero;
// 通过 iframe 的 name 获取，layer 的 iframe 层的 name 格式为 layui-layer-iframe + 数字
var iframeCWin = iframeAWin['layui-layer-iframe' + iframeCIndex];
// 还可以通过 layero 获取，此种方案在 layer 的文档是有的
var iframeCWin = iframeAWin[iframeCLayero.find('iframe')[0]['name']];
</script>

在 iframeC 中操作 iframeB、iframeA
<script type="text/javascript">
// 此段代码处于 iframeC layer iframe 层中
var iframeBWin = parent;
var iframeAWin = top['iframeA']
</script>


场景2：在普通的 iframe 中编写 JavaScript 实现在顶层弹出 layer iframe 层
此时我们在 iframeA 页面使用  top.layer.open 在最顶层页面弹出一个 layer iframe 层,
并把 layer 的 index、layero 存储到 top
此时的 iframeD 是属于 top 的
-----------
top
  iframeA
  iframeB
  iframeD（top.layer.open 弹出）
-----------

<script type="text/javascript">
// 此段代码处于 顶层（top） 页面中
var layerFrameConfig = {};
</script>
<script type="text/javascript">
// 此段代码处于 iframeA 页面中
top.layer.open({
  type: 2,
  content: 'iframeD.html',
  shade: false,
  success: function(layero, index) {
    top.layerFrameConfig.iframeD = {
      layer_index: index,
      layer_layero: layero
    }
  }
});
</script>

然后在 iframeB 获取 iframeD 的 window 对象
<script type="text/javascript">
// 此段代码处于 iframeB 页面中
var lfc = top.layerFrameConfig;
var iframeDIndex = lfc.iframeD.layer_index;
var iframeDLayero = lfc.iframeD.layer_layero;
var iframeDWin = top['layui-layer-iframe' + iframeDIndex];
// 还可以通过 layero 获取
var iframeDWin = top[iframeDLayero.find('iframe')[0]['name']];
</script>

部分人把刚刚的场景2描述为，在 iframeA 中把弹出层弹到顶层页面，这种描述方式是容易误导自己的

应该描述为iframeA 中实现弹出顶层页面的 layer弹窗

演示：在 layer iframe 层中获取父层、顶层 iframe 窗口对象【源码】

页面中的 iframe

页面中的 iframe

猜你喜欢