Last active
February 2, 2026 18:04
-
-
Save pwittchen/7f67e7dc6d42644e87c5341ae16664c6 to your computer and use it in GitHub Desktop.
ms-teams-test.html
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Teams Link Opener</title> | |
| <script src="https://res.cdn.office.net/teams-js/2.28.0/js/MicrosoftTeams.min.js"></script> | |
| <style> | |
| #teamsStatus { | |
| padding: 15px; | |
| margin: 10px 0; | |
| border-radius: 5px; | |
| font-weight: bold; | |
| } | |
| #teamsStatus.in-teams { | |
| background-color: #e6ffe6; | |
| color: #006600; | |
| border: 1px solid #00cc00; | |
| } | |
| #teamsStatus.not-in-teams { | |
| background-color: #ffe6e6; | |
| color: #660000; | |
| border: 1px solid #cc0000; | |
| } | |
| button:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| } | |
| .section { | |
| margin: 20px 0; | |
| padding: 15px; | |
| border: 1px solid #ddd; | |
| border-radius: 5px; | |
| } | |
| .section h3 { | |
| margin-top: 0; | |
| color: #333; | |
| } | |
| .button-group { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 10px; | |
| } | |
| button { | |
| padding: 10px 15px; | |
| cursor: pointer; | |
| } | |
| a.button { | |
| display: inline-block; | |
| padding: 10px 15px; | |
| background-color: #e0e0e0; | |
| border: 1px solid #999; | |
| border-radius: 3px; | |
| text-decoration: none; | |
| color: #333; | |
| font-family: inherit; | |
| font-size: inherit; | |
| } | |
| a.button:hover { | |
| background-color: #d0d0d0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="teamsStatus">Checking Teams environment...</div> | |
| <div class="section"> | |
| <h3>MS Teams SDK</h3> | |
| <div class="button-group"> | |
| <button id="openLinkBtn">Teams openLink()</button> | |
| </div> | |
| </div> | |
| <div class="section"> | |
| <h3>Standard Link Methods</h3> | |
| <div class="button-group"> | |
| <a href="https://example.com" target="_blank" class="button">target="_blank"</a> | |
| <button id="windowOpenBtn">window.open()</button> | |
| <button id="locationHrefBtn">window.location.href</button> | |
| <button id="topLocationBtn">window.top.location.href</button> | |
| </div> | |
| </div> | |
| <div class="section"> | |
| <h3>Android Intent</h3> | |
| <div class="button-group"> | |
| <a href="intent://example.com/#Intent;scheme=https;package=com.android.chrome;end" class="button">intent:// (Chrome)</a> | |
| <button id="intentBtn">intent:// via JS</button> | |
| </div> | |
| </div> | |
| <div class="section"> | |
| <h3>Protocol Handlers (WebView Escape Test)</h3> | |
| <div class="button-group"> | |
| <a href="mailto:test@example.com" class="button">mailto: link</a> | |
| <button id="mailtoBtn">mailto: via JS</button> | |
| <a href="tel:+1234567890" class="button">tel: link</a> | |
| <button id="telBtn">tel: via JS</button> | |
| <a href="sms:+1234567890?body=Test" class="button">sms: link</a> | |
| <button id="smsBtn">sms: via JS</button> | |
| </div> | |
| </div> | |
| <script> | |
| const statusEl = document.getElementById('teamsStatus'); | |
| const openLinkBtn = document.getElementById('openLinkBtn'); | |
| let isInTeams = false; | |
| // Disable button until SDK is ready | |
| openLinkBtn.disabled = true; | |
| microsoftTeams.app.initialize() | |
| .then(() => { | |
| isInTeams = true; | |
| statusEl.textContent = 'You are inside Microsoft Teams!'; | |
| statusEl.className = 'in-teams'; | |
| openLinkBtn.disabled = false; | |
| }) | |
| .catch((error) => { | |
| statusEl.textContent = `Not in Teams: ${error.message || error}`; | |
| statusEl.className = 'not-in-teams'; | |
| console.error('Teams SDK init failed:', error); | |
| }); | |
| openLinkBtn.addEventListener('click', () => { | |
| if (isInTeams) { | |
| microsoftTeams.app.openLink('https://example.com'); | |
| } else { | |
| window.open('https://example.com', '_blank'); | |
| } | |
| }); | |
| // Standard link methods | |
| document.getElementById('windowOpenBtn').addEventListener('click', () => { | |
| window.open('https://example.com', '_blank'); | |
| }); | |
| document.getElementById('locationHrefBtn').addEventListener('click', () => { | |
| window.location.href = 'https://example.com'; | |
| }); | |
| document.getElementById('topLocationBtn').addEventListener('click', () => { | |
| window.top.location.href = 'https://example.com'; | |
| }); | |
| // Android intent via JS | |
| document.getElementById('intentBtn').addEventListener('click', () => { | |
| window.location.href = 'intent://example.com/#Intent;scheme=https;package=com.android.chrome;end'; | |
| }); | |
| // Protocol handlers via JS | |
| document.getElementById('mailtoBtn').addEventListener('click', () => { | |
| window.location.href = 'mailto:test@example.com?subject=Test&body=Hello'; | |
| }); | |
| document.getElementById('telBtn').addEventListener('click', () => { | |
| window.location.href = 'tel:+1234567890'; | |
| }); | |
| document.getElementById('smsBtn').addEventListener('click', () => { | |
| window.location.href = 'sms:+1234567890?body=Test%20message'; | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Author
pwittchen
commented
Feb 2, 2026
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment