专栏首页thisiframe页面点击页面其它地方隐藏某元素
原创

iframe页面点击页面其它地方隐藏某元素

<a href="javascript:;" id="showOrHide"></a>

<!-- 注意此处的$()不是jquery 是document.getElementById()封装为方法 -->
<div id="show-or-hide">
	<a href="javascript:$('show-or-hide').style.display='none';parent.location.href='/auth/login'">切换账号</a>
	<a style="font-size: 12px;text-align: center" href="javascript:$('show-or-hide').style.display='none';parent.location.href='/auth/logout'">退出</a>
</div>
// 定义stopPropagation方法的使用 该方法将停止事件的传播 阻止它被分派到其他Document节点
function stopFunc(e) {
    e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
};

// 获取元素的id
function $(id) {
    return document.getElementById(id);
};

// 初始化加载
window.onload = function () {

    // 当前页面
    document.onclick = function (e) {
        $("show-or-hide").style.display = "none";
        showFlag = true;
    }

    // iframe页面 content为iframe元素的id
    $("content").contentWindow.document.onclick = function (e) {
        $("show-or-hide").style.display = "none";
        showFlag = true;
    }

    // 第二次点击名称会隐藏
    let showFlag = true;
    $("showOrHide").onclick = function (e) {
        if (showFlag) {
            $("show-or-hide").style.display = "block";
            showFlag = false;
        } else {
            $("show-or-hide").style.display = "none";
            showFlag = true;
        }
        e = e || event;
        stopFunc(e);
    }

    $("show-or-hide").onclick = function (e) {
        $("show-or-hide").style.display = "none";
        showFlag = true;
        e = e || event;
        stopFunc(e);
    }
}

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • javascript两种声明函数的方式的一次深入解析

    javascript有两种声明函数的方式,一个是函数表达式定义函数,也就是我们说的匿名函数方式,一个是函数语句定义函数,下面看代码:

    他叫自己MR.张
  • Promise和async/await的总结

    改用Promise后,调用更加灵活了,回调可以处理,也可以不处理,同时可以处理异步调用的异常,更具有通用性

    陨石坠灭
  • JSP 自定义 taglib

    Remember_Ray
  • 前端自动化测试解决方案探析

    前端测试一直是前端项目开发过程中机器重要的一个环节,高效的测试方法可以减少我们进行代码自测的时间,提高我们的开发效率,如果你的代码涉及的测试用例较多,而且项目需...

    IMWeb前端团队
  • Selenium2+python自动化20-引入unittest框架

    from selenium import webdriver from selenium.webdriver.common.by import By from ...

    上海-悠悠
  • JSP 自定义 taglib

    Remember_Ray
  • 前端自动化测试解决方案探析

      前端测试一直是前端项目开发过程中机器重要的一个环节,高效的测试方法可以减少我们进行代码自测的时间,提高我们的开发效率,如果你的代码涉及的测试用例较多,而且项...

    IMWeb前端团队
  • WordPress设置首页页脚友链(附wp_list_bookmarks配置)

    有些WordPress主题因为是单栏主题同时没有配置首页页脚友链的功能,导致主页不通过自定义HTML是没办法放置友链,这样的话,无论是站长之家的友链检测,还是百...

    lollipop72
  • javasciprt性能优化

    本文主要是在我读《高性能Javascript》之后,想要记录下一些有用的优化方案,并且就我本身的一些经验,来大家一起分享下,

    嘿嘿嘿
  • 隐藏在Chrome插件商店中的恶魔——恶意插件User-Agent Swither分析

    ? ? 0x00 插件背景 — User-Agent Swither 是一款Chrome插件,用户切换访问web时候的User-Agent的,这个插件有51万...

    xfkxfk

扫码关注云+社区

领取腾讯云代金券