简介

本控件能实现在页面浏览中弹出内联框架窗口（支持多个窗口的打开），并在屏幕宽度小到不能完全展示窗口时直接跳转到要打开的页面。

预览

试用

代码（JavaScript、CSS）

iframe_control.js

function iframe_control(url) {
    for (var i = 1; ; i++) {
        if (document.getElementById("iframe_control_frame_" + i) == null) break
    }
    if (document.body.clientWidth > 470) {
        //框架
        var div = document.createElement("div");
        div.id = "iframe_control_frame_" + i;
        document.body.appendChild(div);

        //框架->窗口
        var div = document.createElement("div");
        div.className = "iframe_control_window";
        div.id = "iframe_control_window_" + i;
        document.getElementById("iframe_control_frame_" + i).appendChild(div);

        //框架->窗口->标题
        var div = document.createElement("div");
        div.className = "iframe_control_window_title";
        div.id = "iframe_control_window_title_" + i;
        document.getElementById("iframe_control_window_" + i).appendChild(div);

        //框架->窗口->标题->标题文字
        var div = document.createElement("div");
        div.className = "iframe_control_window_title_words";
        div.id = "iframe_control_window_title_words_" + i;
        div.innerHTML = "窗口";
        div.onmousedown = function () {
            var iframe_control_different_x = event.clientX - document.getElementById("iframe_control_window_" + i).getBoundingClientRect().left;
            var iframe_control_different_y = event.clientY - document.getElementById("iframe_control_window_" + i).getBoundingClientRect().top;
            var div = document.createElement("div");
            div.className = "iframe_control_mask";
            div.id = "iframe_control_mask_" + i;
            div.onmousemove = function () {
                document.getElementById("iframe_control_window_" + i).style.transition = "inherit";
                document.getElementById("iframe_control_window_" + i).style.bottom = "inherit";
                document.getElementById("iframe_control_window_" + i).style.right = "inherit";
                var z = event.clientX - iframe_control_different_x + 500;
                var w = event.clientY - iframe_control_different_y;
                document.getElementById("iframe_control_window_" + i).style.top = w + "px";
                document.getElementById("iframe_control_window_" + i).style.left = z + "px";
            }
            div.onmouseup = function () {
                document.getElementById("iframe_control_window_" + i).style.transition = "all .3s ease";
                document.getElementById("iframe_control_mask_" + i).parentNode.removeChild(document.getElementById("iframe_control_mask_" + i));
            }
            document.getElementById("iframe_control_frame_" + i).appendChild(div);
        }
        document.getElementById("iframe_control_window_title_" + i).appendChild(div);

        //框架->窗口->标题->后退按钮
        var div = document.createElement("div");
        div.className = "iframe_control_window_menu_button";
        div.style.fontFamily = "\"Fira Sans\",\"Noto Sans SC\",\"sans-serif\"";
        div.onclick = function () {
            document.getElementById("iframe_control_window_iframe_" + i).contentWindow.history.go(-1);
        }
        div.innerHTML = "←";
        document.getElementById("iframe_control_window_title_" + i).appendChild(div);

        //框架->窗口->标题->前进按钮
        var div = document.createElement("div");
        div.className = "iframe_control_window_menu_button";
        div.style.fontFamily = "\"Fira Sans\",\"Noto Sans SC\",\"sans-serif\"";
        div.onclick = function () {
            document.getElementById("iframe_control_window_iframe_" + i).contentWindow.history.go(1);
        }
        div.innerHTML = "→";
        document.getElementById("iframe_control_window_title_" + i).appendChild(div);

        //框架->窗口->标题->刷新按钮
        var div = document.createElement("div");
        div.className = "iframe_control_window_menu_button";
        div.style.fontFamily = "\"Fira Sans\",\"Noto Sans SC\",\"sans-serif\"";
        div.onclick = function () {
            document.getElementById("iframe_control_window_iframe_" + i).contentWindow.location.reload();
        }
        div.innerHTML = "↻";
        document.getElementById("iframe_control_window_title_" + i).appendChild(div);

        //框架->窗口->标题->菜单按钮
        var div = document.createElement("div");
        div.className = "iframe_control_window_menu_button";
        div.style.fontFamily = "\"Fira Sans\",\"Noto Sans SC\",\"sans-serif\"";
        div.onclick = function () {
            iframe_control_window_menu_button(i);
        }
        div.innerHTML = "☰"
        document.getElementById("iframe_control_window_title_" + i).appendChild(div);

        //框架->窗口->标题->关闭按钮
        var div = document.createElement("div");
        div.className = "iframe_control_window_close_button";
        div.style.fontFamily = "\"Fira Sans\",\"Noto Sans SC\",\"sans-serif\"";
        div.onclick = function () {
            iframe_control_window_close_button(i);
        }
        div.innerHTML = "<b>×</b>"
        document.getElementById("iframe_control_window_title_" + i).appendChild(div);

        //框架->窗口->内容
        var iframe = document.createElement("iframe");
        iframe.className = "iframe_control_window_iframe";
        iframe.id = "iframe_control_window_iframe_" + i;
        iframe.src = url;
        document.getElementById("iframe_control_window_" + i).appendChild(iframe);
        setTimeout(function () { if (document.getElementById("iframe_control_window_" + i) != null) document.getElementById("iframe_control_window_" + i).classList.add("iframe_control_window_left") }, 1);
        document.getElementById("iframe_control_window_iframe_" + i).onload = function () {
            if (document.getElementById("iframe_control_window_iframe_" + i).contentWindow.document.title != null && document.getElementById("iframe_control_window_iframe_" + i).contentWindow.document.title !== "") document.getElementById("iframe_control_window_title_words_" + i).innerHTML = document.getElementById("iframe_control_window_iframe_" + i).contentWindow.document.title;
            else document.getElementById("iframe_control_window_title_words_" + i).innerHTML = document.getElementById("iframe_control_window_iframe_" + i).contentWindow.location.href;
        }
    }
    else window.location.href = url;
}
function iframe_control_window_close_button(i) {
    if (document.getElementById("iframe_control_window_" + i) != null) document.getElementById("iframe_control_window_" + i).classList.add("iframe_control_window_remove");
    setTimeout(function () { if (document.getElementById("iframe_control_frame_" + i) != null) document.getElementById("iframe_control_frame_" + i).parentNode.removeChild(document.getElementById("iframe_control_frame_" + i)); }, 100);
}
function iframe_control_window_menu_button(i) {
    //框架
    var div = document.createElement("div");
    div.id = "iframe_control_menu_frame_" + i;
    document.getElementById("iframe_control_frame_" + i).appendChild(div);

    //框架->窗口
    var div = document.createElement("div");
    div.className = "iframe_control_menu";
    div.id = "iframe_control_menu_" + i;
    div.style.top = event.clientY + "px";
    div.style.left = event.clientX + "px";
    document.getElementById("iframe_control_menu_frame_" + i).appendChild(div);

    //框架->窗口->行1
    var div = document.createElement("div");
    div.className = "iframe_control_menu_line";
    div.id = "iframe_control_menu_line_1_" + i;
    div.innerHTML = "在当前页面中打开";
    div.onclick = function () {
        window.location.href = document.getElementById("iframe_control_window_iframe_" + i).contentWindow.location.href;
        iframe_control_menu_close(i);
    }
    document.getElementById("iframe_control_menu_" + i).appendChild(div);

    //框架->窗口->行2
    var div = document.createElement("div");
    div.className = "iframe_control_menu_line";
    div.id = "iframe_control_menu_line_2_" + i;
    div.innerHTML = "在新标签页中打开";
    div.onclick = function () {
        window.open(document.getElementById("iframe_control_window_iframe_" + i).contentWindow.location.href);
        iframe_control_menu_close(i);
    }
    document.getElementById("iframe_control_menu_" + i).appendChild(div);


    //框架->窗口->行3
    var div = document.createElement("div");
    div.className = "iframe_control_menu_line";
    div.id = "iframe_control_menu_line_2_" + i;
    div.innerHTML = "复制链接地址";
    div.onclick = function () {
        copyText(document.getElementById("iframe_control_window_iframe_" + i).contentWindow.location.href);
        iframe_control_menu_close(i);
    }
    document.getElementById("iframe_control_menu_" + i).appendChild(div);

    //框架->遮罩
    var div = document.createElement("div");
    div.className = "iframe_control_menu_mask";
    div.id = "iframe_control_menu_mask_" + i;
    div.onclick = function () { iframe_control_menu_close(i); };
    document.getElementById("iframe_control_menu_frame_" + i).appendChild(div);

    setTimeout(function () { if (document.getElementById("iframe_control_menu_" + i) != null) document.getElementById("iframe_control_menu_" + i).classList.add("iframe_control_menu_create"); }, 100);
}
function iframe_control_menu_close(i) {
    if (document.getElementById("iframe_control_menu_frame_" + i) != null) document.getElementById("iframe_control_menu_frame_" + i).parentNode.removeChild(document.getElementById("iframe_control_menu_frame_" + i));
}
function copyText(text, callback) {//text: 要复制的内容,callback: 回调
    var tag = document.createElement("input");
    tag.id = "cp_hgz_input";
    tag.value = text;
    tag.style.opacity = "0";
    document.body.appendChild(tag);
    document.getElementById('cp_hgz_input').select();
    document.execCommand('copy');
    document.getElementById("cp_hgz_input").parentNode.removeChild(document.getElementById("cp_hgz_input"));
    if (callback) { callback(text) }
}

iframe_control.css

.iframe_control_window {
    z-index: 10001;
    user-select: none;
    color: black;
    font-size: 14px;
    line-height: 24px;
    position: fixed;
    right: -410px;
    bottom:30px;
    /*left:100px;
    top:200px;*/
    width:370px;
    border-radius: 5px;
    box-shadow: 2px 2px 10px #909090;
    -webkit-box-shadow: 2px 2px 10px #909090;
    background:#FFFFFF;
    transition: all .3s ease;
}
.iframe_control_window_left {
    -webkit-transform: translateX(-500px);
    -ms-transform: translateX(-500px);
    -o-transform: translateX(-500px);
    transform: translateX(-500px);
    transition: all .3s ease;
}
.iframe_control_window_remove {
    -webkit-transform: translate(-498px,2px);
    -ms-transform: translate(-498px,2px);
    -o-transform: translate(-498px,2px);
    transform: translate(-498px,2px);
    transition: all .1s ease;
    opacity:0;
}
.iframe_control_window_title {
    border-radius: 5px 5px 0 0;
    height: 30px;
}

.iframe_control_window_title_words {
    float:left;
    font-size: 14px;
    line-height: 30px;
    padding: 0 5px;
    width: 210px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    cursor:move;
}

.iframe_control_window_close_button {
    float:left;
    text-align: center;
    font-size: 30px;
    height: 30px;
    width: 30px;
    border: none;
    border-radius: 0 5px 0 0;
    transition: all .3s ease;
    line-height: 30px;
}
    .iframe_control_window_close_button:hover {
        color: #FFFFFF;
        background:#FF0000;
    }
.iframe_control_window_menu_button {
    float:left;
    text-align: center;
    font-size: 30px;
    height: 30px;
    width: 30px;
    border: none;
    transition: all .3s ease;
    line-height: 30px;
}
.iframe_control_window_menu_button:hover {
    color: #FFFFFF;
    background:#12B7F5;
}
.iframe_control_window_iframe {
    margin:0;
    width:100%;
    height:500px;
    border:none;
}
.iframe_control_menu {
    z-index: 10010;
    user-select: none;
    color: black;
    font-size: 14px;
    line-height: 24px;
    position: fixed;
    /*left:100px;
    top:200px;*/
    border-radius: 5px;
    box-shadow: 2px 2px 10px #909090;
    -webkit-box-shadow: 2px 2px 10px #909090;
    background:#FFFFFF;
    transition: all .1s ease;
    padding:5px 0;
    opacity: 0;
    line-height: 30px;
    width:130px;
}
.iframe_control_menu_create {
    opacity: 1;
}
.iframe_control_menu_remove {
    -webkit-transform: translate(2px,2px);
    -ms-transform: translate(2px,2px);
    -o-transform: translate(2px,2px);
    transform: translate(2px,2px);
    opacity:0;
}
.iframe_control_menu_line {
    height:30px;
    line-height: 30px;
    margin:0;
    padding:0 5px;
}
.iframe_control_menu_line:hover {
    background:#F0F0F0;
    color:#000000;
}
.iframe_control_mask,.iframe_control_menu_mask {
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:10009;
    opacity: 0;
}

使用方法

在同一页面中同时引用两个文件，调用函数iframe_control(url)即可，其中url是内联框架页面的URL。

兼容性

该代码不支持Internet Explorer 9及更低的版本。