JavaScript 中的 Window.open() 用法详解

这篇具有很好参考价值的文章主要介绍了JavaScript 中的 Window.open() 用法详解。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1 方法介绍

window.open() 方法是 JavaScript 中的一个内置方法,用于在浏览器中打开一个新的窗口或标签页。

这个方法的语法是:

window.open(url, name, features, replace);

需要注意的是,由于弹出窗口的滥用已经成为了一个安全问题,现代浏览器通常会默认阻止 window.open() 方法的调用,除非是在用户的交互下触发的。因此,在实际的开发中,我们需要谨慎使用这个方法,避免被浏览器误认为是恶意行为。

2 参数说明

  • url 必选参数:要打开的 URL 地址。可以是任何有效的 URL,包括 HTTP、HTTPS、FTP 等协议。

  • name 可选参数:新窗口的名称,默认_blank。可以是任何字符串,有以下几种情况:

    • _self:当前窗口中打开。
    • _blank 或者 不写该参数:新窗口中打开,窗口name为空字符串。
    • 任何字符串 新窗口中打开,窗口name为任何字符串。如果指定的名称已经存在,则会在该窗口中打开该 URL,而不是新建一个窗口。
      js window.open,Javascript 杂记,javascript,开发语言
  • features 可选参数:一个逗号分隔的字符串,指定新窗口的一些特性。这个字符串中可以包含以下属性:

    • width:窗口的宽度;
    • height:窗口的高度;
    • top:窗口距离屏幕顶部的距离,默认0;
    • left:窗口距离屏幕左侧的距离,默认0;
    • menubar:是否显示菜单栏,yes\no;
    • toolbar:是否显示工具栏,yes\no;
    • location:是否显示地址栏,yes\no;
    • status:是否显示状态栏,yes\no;
    • resizable:是否允许用户调整窗口大小,yes\no;
    • scrollbars:是否显示滚动条,yes\no。
  • replace 可选参数:一个布尔值,指定新打开的 URL 是否替换当前页面的历史记录。如果为 true,则新的 URL 会替换当前页面的历史记录,用户点击浏览器的“返回”按钮时会回到上一个页面;如果为 false,则新的 URL 会添加到当前页面的历史记录中,用户点击浏览器的“返回”按钮时会回到上一个 URL。

以下几点需要注意:

当 指定 features 参数时, widthheight 是必须明确给出值,否则,features 参数将不起作用。

features 参数中, widthheighttopleft是常用的参数。menubartoolbarlocationstatusresizablescrollbars 参数已经被大部分浏览器弃用(为了更好的用户体验),因此即使进行了相关设置,也不会发生变化。

3 使用示例

3.1 当前窗口中打开网页

使用示例:

window.open("https://www.baidu.com/","_self");

完整代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #btn{
            height: 50px;
            width: 200px;
            border: 1px solid black;
            background-color: bisque;
            line-height: 50px;
            text-align: center;
        }

        #btn:hover{
            border: 1px solid rgb(14, 102, 202);
            background-color: rgb(80, 180, 113);
            cursor:pointer;
        }
    </style>
</head>
<body>
    <div id="btn">百度一下</div>

    <script>
        var myBtn = document.getElementById('btn');
        myBtn.addEventListener('click',function(){
            //当前页面中打开
            window.open("https://www.baidu.com/","_self");
        })
    </script>
</body>
</html>

拓展:

当前窗口中打开也可以使用 window.location.href,它是 JavaScript 中的一个属性,表示当前网页的 URL 地址。它可以用来获取当前网页的 URL,也可以用来跳转到其他网页。

使用示例:

console.log(window.location.href); // 输出当前网页的 URL 地址
window.location.href = "https://www.example.com"; // 跳转到 https://www.example.com

需要注意的是,window.location.href 属性是可读可写的,在设置它的值时可以直接跳转到其他网页。因此在使用时需要小心,以免不小心导致页面跳转。

3.2 新窗口中打开网页

使用示例:

window.open("https://www.baidu.com/");
window.open("https://www.baidu.com/","_blank");
window.open("https://www.baidu.com/","任何字符串");

完整代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #btn{
            height: 50px;
            width: 200px;
            border: 1px solid black;
            background-color: bisque;
            line-height: 50px;
            text-align: center;
        }

        #btn:hover{
            border: 1px solid rgb(14, 102, 202);
            background-color: rgb(80, 180, 113);
            cursor:pointer;
        }
    </style>
</head>
<body>
    <div id="btn">百度一下</div>

    <script>
        var myBtn = document.getElementById('btn');
        myBtn.addEventListener('click',function(){
            //新窗口中打开
            //var item1 = window.open("https://www.baidu.com/");
            //var item2 = window.open("https://www.baidu.com/","_blank");
            var item3 = window.open("https://www.baidu.com/","任何字符串");
            console.log('item',item3);
        })
    </script>
</body>
</html>

为便于理解name参数的含义,将Window.open()的返回值赋给一个变量item,打印结果如下:
js window.open,Javascript 杂记,javascript,开发语言

3.3 在独立窗口中打开一个指定大小和位置的网页

示例代码:

window.open(url, "_blank", "width=800,height=300,top = 200, left=400");

完整代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #btn {
            height: 50px;
            width: 200px;
            border: 1px solid black;
            background-color: bisque;
            line-height: 50px;
            text-align: center;
        }

        #btn:hover {
            border: 1px solid rgb(14, 102, 202);
            background-color: rgb(80, 180, 113);
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id="btn">百度一下</div>

    <script>
        var myBtn = document.getElementById('btn');
        myBtn.addEventListener('click', function () {

            var url = "https://www.baidu.com/";

            window.open(url, "_blank", "width=800,height=300,top = 200, left=400");
        })
    </script>
</body>

</html>

结果展示:
js window.open,Javascript 杂记,javascript,开发语言文章来源地址https://www.toymoban.com/news/detail-623726.html

到了这里,关于JavaScript 中的 Window.open() 用法详解的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • js 通过window.open(url)下载文件,修改文件名

    在页面调用

    2024年02月15日
    浏览(83)
  • JavaScript:setInterval() 用法详解

    setInterval() 是 JavaScript 中的一个内置函数,它用于在指定的间隔时间内重复执行一段代码,实现周期性操作。该函数的语法如下: function :必需,要重复执行的函数或代码块。 milliseconds :必需,重复执行的时间间隔(以毫秒为单位)。 param1, param2, ... :可选,传递给要执行

    2024年02月09日
    浏览(33)
  • 一文吃透JavaScript中的DOM知识及用法

       DOM : D ocument O bject M odel(文档对象模型),定义了用户操作文档对象的接口,可以说DOM是自HTML将网上相关文档连接起来后最伟大的创新。它使得用户对HTML有了空前的访问能力,并使开发者将HTML作为XML文档来处理。 本文知识导图如下:    DOM是网页的核心结构,无论是

    2023年04月08日
    浏览(55)
  • JavaScript的定时器用法详解

    ●在 js 里面,有两种定时器,倒计时定时器 和 间隔定时器 ○倒计时定时器也叫一次性定时器或者叫延时定时器 ○间隔定时器也叫间歇定时器或者叫反复性定时器 倒计时定时器 ●倒计时多少时间以后执行函数 ●语法: setTimeout(要执行的函数,多长时间以后执行) ●会在你设

    2024年02月14日
    浏览(44)
  • WINDOW11系统修复 排查思路大全以及详解powershell用法

    删除Windows系统文件夹可能会导致系统出现各种问题,建议不要随意删除系统文件夹。 使用系统还原:如果你之前启用了系统还原功能,可以尝试使用该功能来恢复系统到之前的某个时间点。打开“控制面板” “系统和安全” “文件历史记录” “还原个人文件”或“还原系

    2024年02月06日
    浏览(43)
  • JavaScript中的scrollTop(js中的scrollTop,滚动到顶部,javascript滚动到顶部)

    简述:scrollTop是JavaScript中一个非常有用且重要的方法,它用于获取或设置元素的垂直滚动条位置,实现各种滚动相关的功能,无论是回到顶部、滚动到指定位置还是监听滚动事件,都需要用到scrollTop,在本文中,我们将深入了解scrollTop的用法和实际应用,这是一张scrollTop的关

    2024年02月08日
    浏览(48)
  • JavaScript中的交互的方式alert,prompt,confirm的用法

    例子: 浏览器会显示一个带有文本消息的模态窗口,还有 input 框和确定/取消按钮。 title 显示给用户的文本 default 可选的第二个参数,指定 input 框的初始值 第二个参数为空的时候 confirm 函数显示一个带有 question 以及确定和取消两个按钮的模态窗口。 点击确定返回 true,点击

    2024年02月14日
    浏览(32)
  • js的BOM对象中的window、location使用

    说明:BOM的全称是Browser Object Model,浏览器对象模型,有Window(浏览器窗口)、Navigator(浏览器)、Screen(屏幕)、History(历史记录)和Location(地址栏)。 window对象指的是浏览器窗口对象,是JavaScript的全部对象;常用的方法有以下几个: alert() :显示带有一段消息和一个确

    2024年02月06日
    浏览(40)
  • 【JS】JavaScript中的this关键字

    目录 this是什么? this的指向 ①全局环境 ②构造函数 ③对象的方法 this的四类调用方式 ①作为对象方法调用 ②纯粹的函数调用 ③作为构造函数调用 ④使用apply、call、bind调用 举例说明 JavaScript  this  指的是它所属的对象。 它拥有不同的值,具体取决于它的使用位置:

    2024年02月14日
    浏览(46)
  • 什么是原型链(Prototype Chain)?它在JavaScript中有什么作用?请解释一下JavaScript中的“this”关键字的含义和用法。

    原型链(Prototype Chain)是一种在JavaScript中创建对象的方式,它允许我们通过继承来扩展对象的属性和方法。 在原型链中,每个对象都有一个原型对象(也称为“原型”或“ proto ”),该对象继承了其父对象的属性和方法。当我们在一个对象上定义一个属性或方法时,如果该

    2024年02月11日
    浏览(59)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包