这是一个头疼的事情，毕竟第二个显示器技术的应用也就这几年的事。

弹出窗口的小事情

多年前，被做烂的弹窗，逼得各大浏览器纷纷出手，直接block掉多次弹窗，避免疯狂弹窗对用户的一万点暴击！

因此使用弹窗要小心，一不留神不见了！

今天忽然有人问我，“老大，能否实现弹窗到第二个显示器？” “这有啥难得，分分钟帮你搞定？”

“话说，打脸，不要太疼！”

想象一下一个会议室中的用户配备了投影仪，他们通过HDMI电缆连接到该投影仪。

我们经常不是将演示文稿镜像到远程端点，而是真正希望在投影仪上全屏显示幻灯片，而让笔记本电脑的屏幕可用于演讲者备注和幻灯片控制。这点PowerPoint做得已经非常棒了！

而网页实现这个效果，那可费劲了。

讯享网

FireFox、IE支持

不得不说，火狐浏览器已经几乎退出市场了。这里贴上代码也仅供把玩了。

/ * Pop up an external window center of the page (works with dual monitor setup's) * * @constructor */ function PopupCenter(url, title, w, h) { 
    // Fixes dual-screen position Most browsers Firefox var dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : screen.left; var dualScreenTop = window.screenTop !== undefined ? window.screenTop : screen.top; var width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width; var height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height; var left = ((width / 2) - (w / 2)) + dualScreenLeft; var top = ((height / 2) - (h / 2)) + dualScreenTop; var newWindow = window.open(url, title, 'scrollbars=yes, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left); // Puts focus on the newWindow if (window.focus) { 
    if(newWindow) { 
    newWindow.focus(); } else { 
    $('<div class="has-error"><p class="help-block">Pop Up blocked. Please disable your pop up blocker to provide your bank details.</p></div>').insertBefore('.refNo'); } } return newWindow; } 

Chrome支持

上述代码Chrome表示不支持！就这么牛逼。

“难道没办法了？”

“当然，不是！”

由国际大佬组织W3C出面，在2020年12月份出台了Presentation API规范，这个api接口允许用户自由控制投放在其他屏幕上，并和投放窗口通信。

WSC规范在此，路过不要错过。

使用这个api，是这样子的。

1. 首先，我们将创建一个新PresentationRequest对象，该对象将包含我们要在辅助附加显示器上显示的URL。

讯享网const presentationRequest = new PresentationRequest('receiver.html'); 

2. 做个控制事件及监听事件：

const presentationRequest = new PresentationRequest(['receiver/index.html']); // Make this presentation the default one when using the "Cast" browser menu. navigator.presentation.defaultRequest = presentationRequest; let presentationConnection; function onPresentButtonClick() { 
    presentationRequest.start() .then(connection => { 
    console.log('Connected to ' + connection.url + ', id: ' + connection.id); }) .catch(error => { 
    console.log(error); }); } //监视连接是否可用 presentationRequest.addEventListener('connectionavailable', function(event) { 
    presentationConnection = event.connection; presentationConnection.addEventListener('close', function() { 
    log('> Connection closed.'); }); presentationConnection.addEventListener('terminate', function() { 
    log('> Connection terminated.'); }); presentationConnection.addEventListener('message', function(event) { 
    log('> ' + event.data); }); }); //发送消息 function() { 
    const message = document.querySelector('#message').value.trim(); const lang = document.body.lang || 'en-US'; log('Sending "' + message + '"...'); presentationConnection.send(JSON.stringify({ 
   message, lang})); } //关闭连接，关闭连接后无法再控制弹出窗口 function() { 
    log('Closing connection...'); presentationConnection.close(); } //关闭连接后，换可以重新再次连接，这里需要指定id presentationRequest.reconnect(presentationId); //关闭弹窗，结束连接调用 function() { 
    log('Terminating connection...'); presentationConnection.terminate(); } //监视可用的显示器 presentationRequest.getAvailability() .then(availability => { 
    console.log('Available presentation displays: ' + availability.value); availability.addEventListener('change', function() { 
    console.log('> Available presentation displays: ' + availability.value); }); }) .catch(error => { 
    console.log('Presentation availability not supported, ' + error.name + ': ' + error.message); }); 

3. 弹窗端可响应连接消息

讯享网let connectionIdx = 0; let messageIdx = 0; //如果有连接建立，则调用该函数 function addConnection(connection) { 
    connection.connectionId = ++connectionIdx; addMessage('New connection #' + connectionIdx); connection.addEventListener('message', function(event) { 
    messageIdx++; const data = JSON.parse(event.data); const logString = 'Message ' + messageIdx + ' from connection #' + connection.connectionId + ': ' + data.message; addMessage(logString, data.lang); maybeSetFruit(data.message); connection.send('Received message ' + messageIdx); }); connection.addEventListener('close', function(event) { 
    addMessage('Connection #' + connection.connectionId + ' closed, reason = ' + event.reason + ', message = ' + event.message); }); }; /* Utils */ const fruitEmoji = { 
    'grapes': '\u{1F347}', 'watermelon': '\u{1F349}', 'melon': '\u{1F348}', 'tangerine': '\u{1F34A}', 'lemon': '\u{1F34B}', 'banana': '\u{1F34C}', 'pineapple': '\u{1F34D}', 'green apple': '\u{1F35F}', 'apple': '\u{1F34E}', 'pear': '\u{1F350}', 'peach': '\u{1F351}', 'cherries': '\u{1F352}', 'strawberry': '\u{1F353}' }; function addMessage(content, language) { 
    const listItem = document.createElement("li"); if (language) { 
    listItem.lang = language; } listItem.textContent = content; document.querySelector("#message-list").appendChild(listItem); }; function maybeSetFruit(message) { 
    const fruit = message.toLowerCase(); if (fruit in fruitEmoji) { 
    document.querySelector('#main').textContent = fruitEmoji[fruit]; } }; //文档载入后，监听连接 document.addEventListener('DOMContentLoaded', function() { 
    if (navigator.presentation.receiver) { 
    navigator.presentation.receiver.connectionList.then(list => { 
    list.connections.map(connection => addConnection(connection)); list.addEventListener('connectionavailable', function(event) { 
    addConnection(event.connection); }); }); } }); 

4. 显示效果
   在点击按钮后，会弹出窗口询问，需要弹出窗口投影到哪个设备。

比如下面的效果，就更炫了。

5. 另外，Chrome浏览器已经增加了“投射…”菜单项，功能类似。

在网页内点击右键会出来选项，老实说，我没测试成功。

另外，如果需要调试接收端，可转到 chrome://inspect页面，选择其他，然后点击当前显示的URL旁边的“检查”链接。

最后说明下，最低版本是Chrome 66，并且支持Chrome OS，Linux和Windows平台。Mac支持将在以后提供。

最后，奉上演示页面：点击此处。

小结

感觉Chrome一统江山后，后遗症也慢慢出现了，每次升级，好像都没啥让人眼前一亮的功能了。

你是否也有同感，留下你的评论。