如何用JavaScript创建弹出窗口

击右上方红色按钮关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！

大家好！我是/小郑搞码事/的小郑

今天和大家分享一下JS如何操作浏览器窗口。只讲如何打开一个新窗口

先来看效果图

上面这个图界面效果就是我们要实现的。

我们常常需要创建一个新窗口，用来向用户显示额外的信息，同时又避免他们正在阅读的信息消失。从实现方案上来看，尽管我们可以用HTML打开一个新的浏览器窗口，但是使用JavaScript可以对新窗口的内容和特性进行更多的控制。

接下来，我们看一下怎么实现的

一、定义窗口打开函数

定义一个打开新窗口的函数newWindow。如上面代码所示，变量catWindow包含一个新的窗口对象，这个对象引用图像文件icon.png，这个新窗口的名称是catWin，必须设置名称，因为我们以后可能希望在a或另一个脚本中引用这个窗口。新窗口的宽度是350像素，高度是260像素，位置是左边400，上边400。

二、写一个调用函数

页面中，包含一个onload事件处理程序，它调用newWinLinks函数，newWinLinks循环遍历页面上的a，检查是否有任何a包含class属性值newWin。如果有，就设置这个a元素的onclick事件处理程序，从而，当点击这个a时，调用newWindow函数。

总结一下

需要注意两个地方：

1、newWindow中，在宽度和高度参数中的逗号之间不能有任何空格，如果有空格，那么脚本可能在某些浏览器中无效，总地来说，当脚本出现错误，需要进行高度时，要首先查找这样的小问题。

2、比如向窗口中添加参数时，希望窗口具有工具栏，地址栏，滚动条

toolbar=yes,location=yes,scrollbars=yes

参数默认是no，可以不填。当然浏览器上表现也有不同，需要知道。

午接到博客访客的反馈，表示博客中的链接在原窗口打开的话，网站的体验非常的不好，而自己又懒的一个个去修改博客网页中的链接打开方式，就加了一个强制页面所有链接新窗口打开的代码，一招解决问题。

html页面强制所有链接新窗口打开的代码

<base target="_blank">

将此代码放到，网页中的 <head>标签之内即可实现，当前页面所有A链接新窗口打开

html <base> 标签

<base>：标签当前页面上的所有的相对链接规定默认 URL 或默认目标。

语法：

<base href="网址" target="打开的方式">

属性;

herf：规定的默认链接

target：链接打开的方式，参数有 _blank，_self 等，与A标签的 target 属性相同

例：html页面所有链接强制新窗口打开

<base target="_blank">

例：html页面所有链接强制在当前窗口打开

<base target="_self">

例：设置默认的URL

<!DOCTYPE html>
<html lang="en">
<head>
 <base href="https://www.feiniaomy.com" target="_blank">
 <title>Document</title>
</head>
<body>
 <a href="/post/1.html">我是相对链接，我可以打开 https://www.feiniaomy.com/post/1.html</a>
 <a href="http://www.baidu.com">我是绝对链接,我可以打开 http://www.baidu.com</a>
</body>
</html>

<base> 标签使用注意事项

1、一个页面中，<base> 标签只能出现一次

2、<base> 标签只能在 <head></head>标签中出现

3、<base> 属于单标签，没有结束标签，类似 <img> 标签

单击带有超链接的文件时，超链接的内容有多种，打开方式，如替换当前页打开，在新窗口打开等。而用来指定打开方式的是＜a>标签的target属性。

如果在一个<a>标签内容含一个target属性，浏览器将会载入和显示用这个标签的href属性命名的、名称与这个目标吻合的框架或者窗口中的文档。如果这个指定名称或id的框架或者窗口不存在，浏览器将打开一个新窗口，并给这个窗口一个指定的标记，然后将新的文档载入那个窗口。从此以后，超链接文档就可以指向这个新的窗口。

target属性的代码格式如下：

其中value有四个参数可用，这4个保留的目标名称用作特殊的文档重定向操作。

（1）-blank。浏览器总在一个新打开、未命名的窗口中载入目标文档。

（2）-self。这个目标的值对所有未指定目标的<a>标签是默认目标，使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题 <base>标签中的target属性一起使用。

（3）-parent。这个目标使得文档载入父窗口或者包含超链接引用的框架的框架集。如果这个引用是在窗口或者顶级框架中，那么它与目标-self等效。

（4）-top。这个目标使的文档载入包含这个超链接的窗口，用-tap目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。

小提示：这些target的所有4个值都以下划线开始。任何其他用一个下划线作为开头的窗口或者目标都会被浏览器忽略，因此，不要将下划线作为文档中定义的任何框架name或id的第一个字符。

下面举例说明target属性的使用方法。

(1)编写代码如下图所示：

（2）在浏览器中打开文件，预览效果如下所示：

（3）单击超链接，在新窗口打开连接页面，下图所示

（4）修改代码并单击链接。

将“-blank”换成“-self”，即代码修改为“<a href="http://www.sina.com.cn" target="_self">新浪</a>”，单击链接后，直接在当前窗口打开新链接，如图所示：

在线咨询

上一篇：开源精粹（第四期）！CSS+JS实现的文字伸缩炫彩动画，真炫酷
下一篇：超赞 vue2/3 可视化打印设计VuePluginPrint

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商