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

代码语言：txt复制

<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>

代码语言：txt复制

// 定义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);
    }
}

iframe

0 人点赞