想让JS弹出窗口显示在第二个(辅助)显示器上？

Posted 2022-08-01 webmote

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了想让JS弹出窗口显示在第二个(辅助)显示器上？相关的知识，希望对你有一定的参考价值。

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

弹出窗口的小事情

多年前，被做烂的弹窗，逼得各大浏览器纷纷出手，直接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，是这样子的。

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

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

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

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);
);

弹窗端可响应连接消息

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':      '\\u1F347',
  'watermelon':  '\\u1F349',
  'melon':       '\\u1F348',
  'tangerine':   '\\u1F34A',
  'lemon':       '\\u1F34B',
  'banana':      '\\u1F34C',
  'pineapple':   '\\u1F34D',
  'green apple': '\\u1F35F',
  'apple':       '\\u1F34E',
  'pear':        '\\u1F350',
  'peach':       '\\u1F351',
  'cherries':    '\\u1F352',
  'strawberry':  '\\u1F353'
;

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);
      );
    );
  
);