JavaScript → 弹出窗口

公告:荻酷网每天不定时为大家更新各种实用技术教程、编曲资源,脚本源代码,插件,软件应用等资讯、绝大部分资源都经过亲测演示,下载荻酷网客户端、获取最新资源不迷路。 下载说明:如果是种子链接请下载专用工具进行下载,其它网盘链接可直接访问下载。

打开新窗口是一种让用户无需离开当前页面即可查看更多信息的常用方法。使用 JavaScript,您可以指定此新创建窗口的尺寸、位置和可见工具栏,以及直接在其中编写代码并让两个窗口一起运行。

Opening New Windows 打开新窗口

Opening new windows is easy enough in plain old HTML, using the target attribute on your links, like so:
在普通的旧 HTML 中打开新窗口很容易,使用链接上的 target 属性,如下所示:

<a href="example.html" target="_blank">link text</a>

This will open the new page in a new window, and is perfect for most people’s needs. However, if you want more control over this new window, you will need to use some JavaScript code. To get a rudimentary page to pop up off your main page on command from a link, you’ll need the following JavaScript code and JavaScript link:
这将在新窗口中打开新页面,非常适合大多数人的需求。但是,如果您想更好地控制这个新窗口,则需要使用一些 JavaScript 代码。要通过链接的命令从主页上弹出一个基本页面,您需要以下 JavaScript 代码和 JavaScript 链接:

var newwindow;
function poptastic(url)
{
	newwindow=window.open(url,'name','height=400,width=200');
	if (window.focus) {newwindow.focus()}
}

<a href="javascript:poptastic('poppedexample.html');">Pop it</a>

We’re simply defining a new JavaScript function, which we can pass different URLs to each time. This will open the specified url in a new, downsized window, the dimensions of which are set down in the function. Try it here: » Pop it
我们只是定义了一个新的 JavaScript 函数,每次都可以向它传递不同的 URL。这将在一个新的缩小窗口中打开指定的 url 窗口,其尺寸在函数中设置。在这里试试: » 弹出它

The HTML for that link simply called the function with the URL of the page we want to pop up as an argument. It looks like this:
该链接的 HTML 只是调用了函数,其中包含我们想要作为参数弹出的页面的 URL。它看起来像这样:

<a href="javascript:poptastic('/examples/poppedexample.html');">Pop it</a>

We load the new window (created with the window.open() method) into a variable. This method then takes three arguments: the address of the new page, the name of the window, and a third argument which can hold some, few, or less optional attributes of the window, such as the height and width which I’ve defined in this case.
我们将新窗口(使用该 window.open() 方法创建)加载到变量中。然后,此方法采用三个参数:新页面的地址、窗口的名称和第三个参数,该参数可以包含窗口的一些、少数或更少的可选属性,例如我在本例中定义的高度和宽度。

The url we’re using is passed to the function when we call it, so that this function can be used for any number of different popups (though the height/width and other options will always be the same unless you modify the function to take more arguments). Some browsers prohibit the opening of pages on another server for security reasons, so test your script. The name we specify will be used to open further pages into this new window.
当我们调用函数时,我们使用的 url 会传递给函数,因此此函数可以用于任意数量的不同弹出窗口(尽管高度/宽度和其他选项将始终相同,除非您修改函数以接受更多参数)。出于安全原因,某些浏览器禁止在另一台服务器上打开页面,因此请测试您的脚本。我们指定的将 name 用于在这个新窗口中打开更多页面。

The Arguments 论据

You have a number of options for the third argument. When you define any of them, the remaining Boolean values (which can be true/false or yes/no or 1/0) are all set to false/no/0. Whichever you choose to use, all of your options go into the same quoted string, with commas between the values, and no spaces are allowed between them.
对于第三个参数,您有多种选择。当您定义其中任何一个时,剩余的布尔值(可以是 true/false 或 yes/no 或 1/0)都设置为 false/no/0。无论您选择使用哪种选项,所有选项都将放入同一个带引号的字符串中,值之间使用逗号,并且它们之间不允许有空格。

height
Defines the height of the window in pixels. Percentage values don’t work.
定义窗口的高度(以像素为单位)。百分比值不起作用。
width
Defines the width. Again, you’ll have no joy with percentages.
定义宽度。同样,你不会对百分比感到高兴。
left
Supported by version 4 browsers and above, this sets how far removed the window appears from the left of the screen. In pixels.
版本 4 及更高版本的浏览器支持,这将设置窗口从屏幕左侧显示的距离。以像素为单位。
top
Partner to left, this pushes the window off the top of the screen.
合作伙伴 , left 这会将窗口从屏幕顶部推开。
resizable
Set to true or false, this may allow the user to resize the window.
设置为 true 或 false,这可能允许用户调整窗口大小。
scrollbars
Another Boolean value, this adds scrollbars to the new window. If your content may be longer then the dimensions you’ve specified, make sure this is set to yes.
另一个布尔值,这会将滚动条添加到新窗口。如果您的内容可能比您指定的尺寸更长,请确保将其设置为 yes 。
toolbar
Specifies whether the basic back/forward toolbar should be visible. If there are links to follow in your new page, set this to yes.
指定基本后退/前进工具栏是否应可见。如果新页面中有要关注的链接,请将其设置为 yes 。
menubar
Specifies whether the main toolbar (File, Edit, …) is shown.
指定是否显示主工具栏(“文件”、“编辑”、“…”)。
location
Specifies whether the location toolbar (address bar) is shown.
指定是否显示位置工具栏(地址栏)。
status
Specifies whether the new window can have a status bar. Best set to yes. For security reasons, Mozilla-based browsers always show the status bar.
指定新窗口是否可以具有状态栏。最好设置为 yes 。出于安全原因,基于Mozilla的浏览器始终显示状态栏。
directories
Specifies whether the directories toolbar is shown (Links toolbar in IE).
指定是否显示目录工具栏(IE 中的“链接”工具栏)。
fullscreen
Internet Explorer-only Boolean attribute which may open the window in fullscreen. It’s annoying — don’t use it.
仅限 Internet Explorer 的布尔属性,该属性可能会全屏打开窗口。这很烦人——不要使用它。
dependent
Netscape 4-only attribute which makes the popup dependent on the status of the main window. If the main window is closed, the popup closes with it.
Netscape 4-only 属性,使弹出窗口依赖于主窗口的状态。如果主窗口已关闭,则弹出窗口将随之关闭。
screenX & screenY  screenX screenY &
Old Netscape attributes for defining the window’s position on the page. Use left and top in their place.
用于定义窗口在页面上的位置的旧 Netscape 属性。使用 left 并 top 代替它们。

So, a fully kitted-out new window might look more like this:
因此,一个完全装备的新窗口可能看起来更像是这样:

newwindow=window.open(url,'name','height=500,width=400,left=100,
  top=100,resizable=yes,scrollbars=yes,toolbar=yes,status=yes');

Focusing and Closing 对焦和闭合

Two vital little tricks can make your popups infinitely more usable. Firstly, in our function at the start of this page, we executed the following code once the window had been created:
两个重要的小技巧可以使您的弹出窗口无限可用。首先,在本页开头的函数中,创建窗口后,我们执行了以下代码:

if (window.focus) {newwindow.focus()}

First we check whether the focus() method is supported — this is vital to stop JavaScript errors. If it is, we set the browser’s focus on the new window, so that as soon as it is affected it is at the front of the display. While the browser always gives new windows the focus when they’re first created, it doesn’t refocus when you send another page to a window that’s already open. Omitting this method may leave your new window hidden behind the main window, depending on what else is happening at the time.
首先,我们检查 focus() 该方法是否受支持——这对于阻止 JavaScript 错误至关重要。如果是,我们将浏览器的焦点设置在新窗口上,以便一旦受到影响,它就会位于显示屏的前面。虽然浏览器在首次创建新窗口时始终会为新窗口提供焦点,但当您将另一个页面发送到已打开的窗口时,它不会重新聚焦。省略此方法可能会使新窗口隐藏在主窗口后面,具体取决于当时发生的其他事情。

Adding the option to close the window is just good practice and you should always add it to your popups. From the main window, we write
添加关闭窗口的选项只是很好的做法,您应该始终将其添加到弹出窗口中。在主窗口中,我们编写

 

<a href="javascript:if (newwindow) newwindow.close()">Close</a> the popup.

First checking if the popup is open (the if() statement checks if the variable has a value), and then using the close() method. Try it here: close the window.
首先检查弹出窗口是否打开(语句 if() 检查变量是否有值),然后使用该 close() 方法。在这里试试:关闭窗口。

From inside the popup itself, the code is simply
从弹出窗口本身内部,代码很简单

<a href="javascript:window.close()">Close</a> this popup.

Linking to Windows 链接到 Windows

Once you have popped a window open, you can direct further links into it with the target attribute. If we have defined name to be 'popsome', we can make links open into this window with
打开窗口后,您可以使用该 target 属性将更多链接定向到该窗口。如果我们定义 name 为 'popsome' ,我们可以使用

<a href="page.html" target="popsome">Link</a>

If the popup window has already been closed your browser will open a new, normal window, and set its name to whatever you’ve specified as the value of target. Try it with these: Open and then open a new link inside it. Then close.
如果弹出窗口已关闭,您的浏览器将打开一个新的普通窗口,并将其名称设置为您指定为 的值 target 。尝试以下操作:打开,然后在其中打开一个新链接。然后关闭。

Accessible Popups 可访问的弹出窗口

Throughout the examples above I’ve been using the javascript: link style. This is an easy way to execute JavaScript functions, instead of linking to a dummy anchor and using event handlers, as in
在上面的示例中,我一直在使用 javascript: 链接样式。这是执行 JavaScript 函数的简单方法,而不是链接到虚拟锚点并使用事件处理程序,如

<a href="#" onClick="poptastic('page.html');">Pop it</a>

For modern browsers we can write
对于现代浏览器,我们可以编写

<a href="javascript:poptastic('page.html');">Pop it</a>

This is an easy way to show popups in action, but is not the recommended way of actually doing popups for real. Creating popups using the javascript: mechanism is bad for two reasons:
这是显示弹出窗口的简单方法,但不是实际实际执行弹出窗口的推荐方法。使用该 javascript: 机制创建弹出窗口是不好的,原因有两个:

  1. Users using browsers that don’t support JavaScript (or who have disabled JavaScript) won’t be able to follow these links, and so will miss the potentially vital information contained in your popups.
    使用不支持 JavaScript(或已禁用 JavaScript)的浏览器的用户将无法点击这些链接,因此会错过弹出窗口中包含的潜在重要信息。
  2. Most browsers allow you to right click a link and either open it in a new window or a new tab. Since these links don’t have proper href values, they’ll open blank windows, which can be very annoying.
    大多数浏览器允许您右键单击链接,然后在新窗口或新选项卡中打开它。由于这些链接没有正确的 href 值,它们会打开空白窗口,这可能非常烦人。

To this end, there is a more gracefully degrading method of linking to popups, which allows the links to work both ways. The ideal version of the above link is
为此,有一种更优雅的降级方法链接到弹出窗口,它允许链接双向工作。上述链接的理想版本是

<a href="page.html" onClick="poptastic(this.href); return false;">Pop it</a>

 

This will create a link that opens the popped page as a normal page in a non-JavaScript browser. In a modern browser this default action is suppressed (by return false) and the page is popped up as you want it. The URL you’re opening is set as this.href, which tells JavaScript to look at the href value of the current link and use that, meaning you don’t have to write the same URL twice. » Try it here. You should always code your popups like this, so nobody is left out.
这将创建一个链接,在非 JavaScript 浏览器中将弹出的页面作为普通页面打开。在现代浏览器中,此默认操作将被禁止(由 return false ),并且页面会根据需要弹出。您打开的 URL 设置为 this.href ,这告诉 JavaScript 查看当前链接的 href 值并使用它,这意味着您不必两次编写相同的 URL。» 在这里试试吧。您应该始终像这样对弹出窗口进行编码,这样就不会有人被排除在外。

Writing to the Window
写入窗口

Being able to generate an entirely new page from the code of an existing page has advantages. You don’t need to create a whole new page for each of your popups, and so the popup content is already loaded when the main page is. First, let’s » generate a page.
能够从现有页面的代码生成一个全新的页面具有优势。您不需要为每个弹出窗口创建一个全新的页面,因此在主页加载时已经加载了弹出窗口内容。首先,让我们 » 生成一个页面。

function dirtypop()
{
  var generator=window.open('','name','height=400,width=500');
  
  generator.document.write('<html><head><title>Popup</title>');
  generator.document.write('<link rel="stylesheet" href="style.css">');
  generator.document.write('</head><body>');
  generator.document.write('<p>This page was generated by
    the main window.</p>');
  generator.document.write('<p><a href="javascript:self.close()">
    Close</a> the popup.</p>');
  generator.document.write('</body></html>');
  generator.document.close();
}

<a href="javascript:dirtypop();">Generate!</a>

As you can see, we create a new window as a variable again, and then use the variable name in place of window (which normally comes before document) to write directly into it. The document.close() method at the end is not the same as window.close() — in this case it signifies that we’ve stopped writing to the window. Note that any stylesheet information you have on your main page is not carried through to the popup; you must write the style information into the popup code.
正如你所看到的,我们再次创建一个新窗口作为变量,然后使用变量名称代替( window 通常在 document )直接写入其中。末尾 document.close() 的方法与 window.close() – 在本例中,它表示我们已停止写入窗口。请注意,您在主页上拥有的任何样式表信息都不会传递到弹出窗口中;您必须将样式信息写入弹出代码中。

Generating windows like this does bring some problems. For one, the URL of the page is really up to the browser. Some leave it as ‘undefined’ or ‘blank’, while others just give it the URL of the main window, which brings up all sorts of issues. You can check what your browser reckons the URL is with the view URL link I added to the window above. Thankfully, while some browsers see the popup as a conjoined part of the same page, self.close() will always close just the popup, not its parent window.
生成这样的窗口确实会带来一些问题。首先,页面的 URL 实际上取决于浏览器。有些人将其保留为“未定义”或“空白”,而另一些人则只给它主窗口的 URL,这会带来各种问题。您可以使用我添加到上面窗口的视图 URL 链接来检查浏览器认为 URL 是什么。值得庆幸的是,虽然某些浏览器将弹出窗口视为同一页面的连体部分, self.close() 但始终只会关闭弹出窗口,而不是其父窗口。

温馨提示:本文最后更新于2024-05-31 10:18:03,某些文章具有时效性,若有错误或已失效,请在下方留言
©版权声明
感谢您的阅读
喜欢就支持一下吧
点赞15 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

夸夸
还有吗!没看够!
取消
昵称表情代码图片

    暂无评论内容