JS BOM window.open 方法（不跳转页面，弹出窗口）

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <p id = "pragraph one" title="i love you">
            i love you
        </p>
        <p>
            i am a boy
        </p>
        <ul id = "purchases">
            <li>book</li>
            <li class = "sale">video</li>
            <li class = "sale important good love">photo</li>
        </ul>
        <ul id = "testcount" title = "list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <a href="https://www.baidu.com/"  class ="popup">
            百度一下</a>
        <!-- onclick = 'return false' ,点击后不跳转了 -->
        <script type="text/javascript">
        var addLoadEvent = function(func) {
            var oldonload = window.onload;
            //将已有的保存，如果已有
            if (typeof window.onload !== 'function' ) {
                window.onload = func;
            } else {
                window.onload = function(){
                    oldonload();
                    func();
                }
            }
        }
        addLoadEvent(prepareLinks);
        function prepareLinks() {
            //BUG 此处表达成var prepareLinks = function(){ ， 则函数无效，到这就不运行了
            if(!document.getElementsByTagName) return false;
            var links =document.getElementsByTagName('a');
            for (var i = 0; i < links.length; i++) {
                if (links[i].getAttribute('class') == 'popup') {
                    //包含了 对 'popup' 是否存在的判断
                    links[i].onclick = function(){
                        return popUp(this.getAttribute("href")) ? false : true;
                        //return !popUp(this.getAttribute("href"));
                    }
                }
            }
        }

        var popUp = function(winURL) {
            window.open(winURL,"popup","resizable,scrollbars,status");
            return true;
        }
        //用语句为代码查错  将console.log('') 插入到 你觉得可能出错的那一行 看控制台是否能正常打印出
        //document.getElementsByTagName('a')[0].innerText = 'baiduyixia'
        </script>
    </body>
</html>

点击网页上的 ‘百度一下’ ，在本页面弹出一个百度导航的窗口（且窗口的一些属性能控制）；

常用于电商网站，点击链接弹出结算页面；而不会离开原来的页面。

JS BOM window.open 方法（不跳转页面，弹出窗口）

猜你喜欢