js 文件预览 在窗口设置“自定义名称”

1. 最近需要做一个点击表格某一列的标题，预览当前文件的一个小功能。本身功能很简单，点击该标题，预览文件，那么拿到他对应的文件地址，在浏览器打开就行了。

2. 事实如此，使用window.open(url, '_blank');就行，只要你地址正确，那么在浏览器的窗口就打开了一个新的文件，（注意这里打开的是pdf格式，其它格式的需要对应的方法），然而问题来了，文件是正常打开了，但是浏览器窗口的标题确不是我想要的，为此设置了半天，还是不行。

3.找了半天原因，原来是 浏览器 “新窗口的名字是由浏览器根据url 定义的，本身无法设置”，但是现在有这个需求，尝试了很多方法都不行，后来发现了window.open 本身有许多内置属性，例如：

width：窗口的宽度；

height：窗口的高度；

top：窗口距离屏幕顶部的距离，默认0；

left：窗口距离屏幕左侧的距离，默认0；

menubar：是否显示菜单栏，yes\no；

toolbar：是否显示工具栏，yes\no；

location：是否显示地址栏，yes\no；

status：是否显示状态栏，yes\no；

resizable：是否允许用户调整窗口大小，yes\no；

scrollbars：是否显示滚动条，yes\no。

打开一个新窗口本质是打开一个页面，那么肯定有 body，document 这些元素，那么我们直接设置他的title不就行了，事实还真可以。

let pages= window.open(encodeURI(basePreviewUrl + ret.body.viewPath), '_blank');
 // 强行设置标题     新窗口的名字是由浏览器定义的 本身无法设置
 setTimeout(function(){
        pages.document.title = fileName 
 },3000);

//fileName  是名称  open 里面是地址 换成你们自己的

注意这里的定时器：如果你要加载的文件时间很长的话，不加定时器标题会被浏览器生成的标题覆盖了，后面的时间看你们实际需要多长时间。

4. 既然这样可以加上的话，那很简单了，我们直接往里面扔个iframe进去不就行了，把它的宽、高、边框设置为空不就行了，具体代码如下：

 // 强行设置标题  方法
                 openUrl(url, title) { 
                    //console.log('url',url,title)
                      // 检查是否已经存在相同URL的窗口,不要重复打开
                        if (vue.flagYu === url) {
                            return; 
                        }
                      const newWindow= window.open('about:blank', title);
                      newWindow.document.title = title;
                      let iframe = document.createElement('iframe');
                      iframe.src = url;
                      iframe.style.width = '100%';
                      iframe.style.height = '100vh';
                      iframe.style.margin = '0';
                      iframe.style.padding = '0';
                      iframe.style.overflow = 'hidden';
                      iframe.style.border = 'none';
                      newWindow.document.body.style.margin = '0';
                      newWindow.document.body.appendChild(iframe);
                      window.newWindow = newWindow;
                      vue.flagYu = url;
  },

这里是用vue 封装了一个方法，需要的话直接传参数就行了，传url，和要显示的标题就行。

this.openUrl('','标题')。

结束。。

如果对您有用，请点个赞哦（ღ( ´･ᴗ･` )比心）