We have created a web application with 2 pages broadcast.html and receiver.html. Broadcast.html is added as iframe in servicenow crm using openframe widget and receiver.html is opened seperately from broadcast.html. We tried to make communication between 2 pages using broadcast api and its not working in chrome browser when open inside servicenow but the communication is working if broadcast.html is not loaded in servicenow.
Codes are attached below
Openframe widget code
<html>
<body style="padding-top: 0rem;">
<iframe id="softphone" style="width: 100%; height: 100%; position: fixed; border: none;" allow="microphone *" src="https://localhost:9981/broadcast.html" />
</body>
</html>
Broadcast HTML
<!DOCTYPE html>
<body>
<!-- The title will change to greet the user -->
<h1 id="title">Hey</h1>
<input id="name-field" placeholder="Enter Your Name"/>
</body>
<script>
window.onload=function(){
window.open("/reciever.html?ts=" + new Date().getTime(), "reciever", "fullscreen=no, width=455, height=320, resizable=no, location=no'");
//window.open("reciever.html");
}
var bc = new BroadcastChannel('test_channel');
(()=>{
const title = document.getElementById('title');
const nameField = document.getElementById('name-field');
const setTitle = (userName) => {
title.innerHTML = 'Hey ' + userName;
}
// When the page loads check if the title is in our localStorage
if (localStorage.getItem('title')) {
setTitle(localStorage.getItem('title'));
} else {
setTitle('please tell us your name');
}
nameField.onchange = (e) => {
const inputValue = e.target.value;
// In the localStorage we set title to the user's input
localStorage.setItem('title', inputValue);
// Update the title on the current page
setTitle(inputValue);
// Tell the other pages to update the title
bc.postMessage(inputValue);
}
})()
</script>
</html>
Receiver HTML
<!DOCTYPE html>
<body>
<!-- The title will change to greet the user -->
<h1 id="title">Hey</h1>
</body>
<script>
var bc = new BroadcastChannel('test_channel');
bc.onmessage = (messageEvent) => {
console.log(messageEvent.data);
document.getElementById('title').innerHTML=messageEvent.data;
}
</script>
</html>