iframe 跳转页面 父级/子页面相互操作

父级页面：index

跳转页面

<a href="list.html" target="layui-iframe">
    任务列表
</a>

target 获取的是 name为 layui-iframe 内容展示框

注释：

target定义和用法：

<a> 标签的 target 属性规定在何处打开链接文档。

如果在一个 <a> 标签内包含一个 target 属性，浏览器将会载入和显示用这个标签的 href 属性命名的、名称与这个目标吻合的框架或者窗口中的文档。
如果这个指定名称或 id 的框架或者窗口不存在，浏览器将打开一个新的窗口，给这个窗口一个指定的标记，然后将新的文档载入那个窗口。
从此以后，超链接文档就可以指向这个新的窗口。

iframe

<iframe src="index-info.html" frameborder="0" width="100%" height="100%" name="layui-iframe" id="layui-iframe" class="layui-iframe"></iframe>

jq

父级页面 点击 QIEHUAN 给 父级跟子页面同时添加  blue_skin

/*换肤*/
$(function () {
    $('.QIEHUAN').click(function () {
        if(!$('.body_on').hasClass('blue_skin')){
            $('.body_on').addClass('blue_skin');
        }else {
            $('.body_on').removeClass('blue_skin');
        }
    });
});

子级页面：

jq
自动获取父级 blue_skin 是否存在

$(function () {
    if($('.body_on', parent.document).hasClass('blue_skin')){
        $('.body_on').addClass('blue_skin');
    }else{
        $('.body_on').removeClass('blue_skin');
    }
});

重点：
$('.body_on', parent.document)

获取父级页面点击动作

parent.$('.QIEHUAN',parent.document).click(function () {
    if(!$('.body_on').hasClass('blue_skin')){
        $('.body_on').addClass('blue_skin');
    }else{
        $('.body_on').removeClass('blue_skin');
    }
});
重点：
parent.$('.QIEHUAN',parent.document)

通过子页面按钮打开父级页面模态框

$(function () {
    $('.btn5').click(function () {
        if($('.mask', window.parent.document).is(':hidden')){
            $('.mask', window.parent.document).show();
        }
        if($('.XJLB', window.parent.document).is(':hidden')){
            $('.XJLB', window.parent.document).show();
        }
    });
});

重点：
$('.mask', window.parent.document)