• 第五章 javascript编程可养成的好习惯


    用户点击某个链接时弹出一个新窗口
    javascript使用window对象的open()方法来创建新的浏览器窗口,这个方法有三个参数:
    window.open(url,name,features)
    url:新窗口地址,如果省略,则弹出空白窗口
    name:新窗口的名字
    features:新窗口的属性。

    比如:

    function open_url(url){
                window.open(url,"new-window","320,height:480");
            }       

     

    用 “javascript:” 伪协议来调用上面那个函数。(“javascript:” 伪协议让我们可以通过一个链接来调用javascript函数)

    <body>
    <a href="javascript:open_url('http://www.baidu.com');">百度</a>
    <script type="text/javascript">
    function open_url(url){
        window.open(url,"new-window","320,height:480");
    }       
    </script>
    </body>

    用onclick事件处理函数作为属性 嵌入<a>标签

    <a href="#" onclick="open_url('http://www.baidu.com');return false;">百度2</a>
    <script type="text/javascript">
    function open_url(url){
        window.open(url,"new-window","320,height:480");
    }       
    </script>

    上面两种方法没有预留退路,如果用户禁用浏览器的javascript1功能,这样的链接就没用处了。

     预留退路就是说,虽然在遇到不支持js的浏览器或者用户禁用js这类障碍某些功能无法使用,但最基本的操作仍能顺利完成。

    <!-- 预留退路的做法-->
    <a href="http://www.baidu.com" onclick="open_url('http://www.baidu.com'); return false">百度3</a>
    
    <!--预留退路的简化版-->
    <a href="http://www.baidu.com" onclick="open_url(this.getAttribute('href'); return false">百度4</a>
    
    <!--预留退路的最简化版-->
    <a href="http://www.baidu.com" onclick="open_url(this.href); return false">百度4</a>
    
    <!--由DOM提供的this.href属性-->

    现在即使javascript已被禁用这个链接也是可用的。

     

    行为和结构分离开:

    <a href="http://www.baidu.com" class="link">百度5</a>
    
    <script type="text/javascript">
    function open_url(url){
        window.open(url,"new-window","320,height:480");
    }    
    
    window.onload = prepareLinks;
    function prepareLinks(){
        var links=document.getElementsByTagName('a');
        for (var i=0; i<links.length; i++){
            if (links[i].getAttribute('class') == 'link'){
                links[i].onclick = function(){
                    open_url(this.getAttribute('href'));
                    return false;
                }
            }
        }
    }   
    </script>

     

  • 相关阅读:
    使用NSIS打包程序
    vue.config.js 的完整配置(超详细)!
    前端 Electron Nsis Web 安装包配置方法
    使用NSIS制作安装包
    Echarts X轴(xAxis)
    Windows环境下Jenkins打包、发布、部署
    一、NSIS介绍
    织梦DEDECMS首页调用单页文档内容并带过滤HTML的方法
    php调试方法
    jQuery 图片轮播滚动效果
  • 原文地址:https://www.cnblogs.com/afighter/p/5447977.html
Copyright © 2020-2023  润新知