JS打开链接的完整教程

一、JS打开链接的代码

我们先来看一下JS如何打开一个链接。以下代码可以实现点击按钮时打开一个新的链接:

<button onclick="window.open('http://www.example.com')">打开新链接</button>

以上代码中，我们使用了window.open()方法，该方法可以打开一个新窗口，并加载指定的URL。该方法的参数是URL地址，其中你可以选择是否为页面设置新窗口大小，是否关闭之前打开过的窗口等。

除此之外，我们还可以对window.open()方法进行多种定制化调整，比如设置新窗口的大小、位置、工具栏等。以下代码演示如何打开一个宽为500像素，高为500像素的新窗口:

<button onclick="window.open('http://www.example.com', '_blank', 'width=500,height=500')">打开新链接</button>

二、JS打开链接不显示窗口

在某些场景下，我们可能不希望用户看到弹出窗口。例如，我们要通过JS打开一个新的统计链接，但不希望用户看到该链接。下面的代码将打开一个新的链接，但不会在窗口中显示:

window.open('http://www.example.com', '_blank', 'height=0,width=0');

以上代码中，我们将height和width两个属性设置为0，这样，即使打开了一个新窗口，用户也看不到其内容。此时只能看到浏览器的地址栏会跳转至指定链接的地址。

三、JS打开链接并隐藏

在某些场景下，我们希望页面的链接和内容不仅不能展示给用户，同时还需要尽量隐藏。以下代码可以使打开的窗口隐藏:

window.open('http://www.example.com', 'windowName', 'toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,width=10,height=10,top=0,left=0');
self.window.moveTo(0, 0);
self.window.resizeTo(screen.width, screen.height);

以上代码中，我们通过将工具栏、地址栏、状态栏、菜单栏、滚动条、大小调整等全部进行隐藏，来实现窗口的完全隐藏。另外我们还使用了self.window.moveTo(0, 0)和self.window.resizeTo(screen.width, screen.height)，让窗口大小和位置与当前屏幕大小一致。

四、JS打开链接自动下载

有时候我们会希望用户不用点击链接就可以自动下载文件，可以通过以下代码进行实现：

window.location.href = 'http://www.example.com/download.zip';

以上代码中，我们直接设置window.location.href属性为文件的下载地址。这样，当用户访问网页时，文件就会自动下载到电脑本地。

五、JS打开链接即可下载

有时我们需要在新页面中打开链接，并且自动下载文件。”download”属性可以实现这一功能。

<a href="http://www.example.com/download.zip" download>Download</a>

以上代码中，我们在链接中添加了“download”属性，指定文件下载的名称。这样，当用户点击链接时，文件就会自动下载到本地，并以“download.zip”为文件名保存在本地设备中。

六、JS打开链接下载文件

在某些情况下，我们想要通过JS完成文件下载的功能。使用JS实现文件下载和通过链接实现文件下载的方式略有不同。我们需要在服务器端实现响应操作，例如增加响应头信息，例如content-disposition为“attachment”，type设定为“application/octet-stream”。

var xhr = new XMLHttpRequest();
xhr.open('GET', '/download/file.zip', true);
xhr.responseType = 'blob';
 
xhr.onload = function(e) {
    if (this.status == 200) {
        var blob = new Blob([this.response], {type: 'application/octet-stream'});
        var downloadLink = document.createElement('a');
        downloadLink.href = window.URL.createObjectURL(blob);
        downloadLink.download = 'file.zip';
        downloadLink.click();
    }
};
 
xhr.send();

以上代码中，我们使用XMLHttpRequest对象发起了一个GET请求，请求文件地址为“/download/file.zip”，并且设置responseType为“blob”。当服务器响应成功时，响应内容会以二进制形式存放在response属性中。我们通过Blob对象将响应内容转换成二进制数据。接着，我们创建一个节点，将文件的二进制数据转换成下载链接，并设置文件名为“file.zip”。最后，我们通过click()方法触发节点的单击事件，文件开始下载到本地。

<iframe src="http://www.example.com" style="width: 1px; height: 1px; border: none; position: absolute; left: -9999px;"></iframe>

var qrcode = new QRCode('qrcode', {
                    width: 200,
                    height: 200,
                    text: 'http://www.example.com'
                });
                
window.open('http://mp.weixin.qq.com/s/xxxxx');

window.location.href = 'http://www.example.com';