码迷,mamicode.com
首页 > Web开发 > 详细

HTML跳转新窗口的方法

时间:2017-03-10 16:25:18      阅读:251      评论:0      收藏:0      [点我收藏+]

标签:sch   ntb   event   tca   dev   笔试   用法   eve   doc   

 

  • 笔试遇到这样的一个问题,特意整理一下。

方法一 纯HTML

    <a href="http://www.cnblogs.com" target="_blank">博客园</a>

方法二 使用 onclick

    // HTML 
    <a onclick="openUrl(‘http://www.cnblogs.com‘)">博客园</a>
    // js
    // 使用 ‘window.open()
    <script type="text/javascript">
        function openUrl(url){
            window.open(url);
        }
    </script>
  • 下面用到的 openUrl()都是用法二的函数
  • window.open() 的具体用法

方法三 使用 href="javascript:openUrl()"

    // HTML
    <a href="javascript:openUrl(‘http://www.cnblogs.com‘)">博客园</a>

方法四 直接使用 window.open()

    <a onclick="window.open(‘http://www.cnblogs.com‘)">博客园</a>

方法五 使用 id + onclick

    // HTML
    <p id="btn">博客园</p>
    // js
    <script type="text/javascript">
        var btn = document.getElementById(‘btn‘);
        btn.onclick =function(){
            openUrl("http://www.cnblogs.com");
        };
    </script>

方法六 使用 addEventListener()

    // HTML
    <p id="btn">博客园</p>
    // js
    <script type="text/javascript">
        var btn = document.getElementById(‘btn‘);
        btn.addEventListener("click", function(e){
            openUrl("http://www.cnblogs.com");
        }, false);
    </script>
 
分类: HTML

HTML跳转新窗口的方法

标签:sch   ntb   event   tca   dev   笔试   用法   eve   doc   

原文地址:http://www.cnblogs.com/GoCircle/p/6531084.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!