-
Notifications
You must be signed in to change notification settings - Fork 4
/
backtotab.html
42 lines (38 loc) · 1.13 KB
/
backtotab.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Programmatic back-to-tab demo</title>
<style>
#toggle-pip {
display: block;
}
</style>
</head>
<body>
<input type="button" id="toggle-pip" value="Toggle Pip"></input>
</body>
<script>
const togglePipButton = document.querySelector('#toggle-pip');
let pipWindow = null;
async function enterPip() {
if (pipWindow != null) {
return;
}
pipWindow = await documentPictureInPicture.requestWindow({width: 400, height: 400});
const pipScript = pipWindow.document.createElement('script');
pipScript.src = 'backtotabpipscript.js';
pipWindow.document.body.append(pipScript);
const btnBackToTabFromOpenerRealm = pipWindow.document.createElement('input');
btnBackToTabFromOpenerRealm.setAttribute('type', 'button');
btnBackToTabFromOpenerRealm.value = 'Back to tab from opener realm';
btnBackToTabFromOpenerRealm.addEventListener('click', _ => { window.focus(); });
pipWindow.document.body.append(btnBackToTabFromOpenerRealm);
}
togglePipButton.addEventListener("click", async () => {
if (pipWindow == null) {
enterPip();
return;
}
pipWindow.close();
});
</script>