使用window.open()打开新的窗口

最新推荐文章于 2024-05-13 23:20:58 发布

Dragon_GL

最新推荐文章于 2024-05-13 23:20:58 发布

阅读量4.4k

点赞数

分类专栏： JavaScript 文章标签： javascript 浏览器

本文链接：https://blog.csdn.net/u014695532/article/details/70303558

版权

JavaScript 专栏收录该内容

32 篇文章 1 订阅

订阅专栏

本实例要在窗口每次被加载的时候弹出一个话框。

本实例主要应用 JavaScript 的 window 对象。

window 对象的常用方法：

alert() 弹出一个警告对话框
confirm() 在确认对话框中显示指定的字符串
prompt() 弹出一个提示对话框
close() 关闭被引用的窗口
focus() 将被引用的窗口放在所有打开窗口的前面
open() 打开新浏览器窗口并且显示由URL或名字引用的文档，并设置创建窗口的属性
resizeTo(x,y) 设置窗口的大小
resizeBy(offsetx,offsety) 按照指定的位移量设置窗口的大小

应用 JavaScript 的 open()方法可以打开浏览器窗口。
使用 window 对象打开窗口的语法格式如下。

WindowVar = window.open(url, windowname, location);

参数说明如下：
1. WindowVar: 当前打开窗口的句柄。
2. url: 目标窗口的URL。
3. windowname: window:对象的名称。
4. location: 对窗口属性进行设置。

对窗口属性进行设置的可选参数:

width 窗口的宽度.
height 窗口的高度.
scrollbars 是否显示滚动条；
resizable 设定窗口大小是否固定；
toolbar 浏览器工具条，包括后退及前进按钮等；
menubar 菜单条，一般包括有文件，编辑及其他一些条目；
location 定位区，也叫地址栏，是可以输入URL的浏览器文本区；
direction 更新信息按钮；

下面是一个演示实例：

index.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html,
        body {
            background-color: #3e4377;
        }

        h1 {
          color: #FFF;
        }
    </style>
</head>

<body>

    <h1>HomePage</h1>

    <script type="text/javascript" language="javascript">
        window.onload = function() {
            window.open("new.html", "new", "height=280, width=800, top=200, left=300, resizable=no, location=no", false);
        }
    </script>
</body>

</html>

new.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html,
        body {
            background: #8aa230;
        }

        h1 {
          color: #FFF;
        }
    </style>
</head>

<body>
    <div>
        <h1>New</h1>
    </div>
</body>

</html>

效果截图：
这里写图片描述

如果，是需要指定事件后打开新页面的话，需要对index.html页面里的js代码做些修改，代码如下：

  <script type="text/jscript" language="javascript">
        function pp() {
            window.open("new.html", "new", "height=280, width=80%,top=10%,left=10%,resizable=no, location=no", false);
        }
        setTimeout("pp()", 5000);
  </script>

Dragon_GL

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
使用window.open()打开新的窗口

本实例要在窗口每次被加载的时候弹出一个话框。本实例主要应用 JavaScript 的 window 对象。window 对象的常用方法：alert() 弹出一个警告对话框confirm() 在确认对话框中显示指定的字符串prompt() 弹出一个提示对话框close() 关闭被引用的窗口focus() 将被引用的窗口放在所有打开窗口的前面open() 打开新浏览器窗口并且显示由URL或名
复制链接

扫一扫