Broadcast Channel API is not working inside servicenow iframe and child window in chrome browser

Kalai Arasan · ‎10-13-2023

We have created a web application with 2 pages broadcast.html and receiver.html. Broadcast.html is added as iframe in ServiceNow crm using open frame widget and receiver.html is opened separately 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.

Note: It is working in Edge browser and not working in chrome and Firefox

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>

  <h1 id="title">Hey</h1>
  <input id="name-field" placeholder="Enter Your Name"/>


<script>
    window.onload=function(){
        window.open("/reciever.html?ts=" + new Date().getTime(), "reciever", "fullscreen=no, width=455, height=320, resizable=no, location=no'");
    }

var bc = new BroadcastChannel('gator_channel');

(()=>{
  const title = document.getElementById('title');
  const nameField = document.getElementById('name-field');
  const setTitle = (userName) => {
    title.innerHTML = 'Hey ' + userName;
  } 


  if (localStorage.getItem('title')) {
    setTitle(localStorage.getItem('title'));
  } else {
    setTitle('please tell us your name');
  }

  nameField.onchange = (e) => {
    const inputValue = e.target.value;
   
    localStorage.setItem('title', inputValue);  
    setTitle(inputValue);
    // Tell the other pages to update the title
    bc.postMessage(inputValue);
  }
})()
</script>
</body>
</html>

Receiver HTML

<!DOCTYPE html>

<body>
<!-- The title will change to greet the user -->
<h1 id="title">Hey</h1>
 
<script>
    var bc = new BroadcastChannel('test_channel');

    bc.onmessage = (messageEvent) => {
        console.log(messageEvent.data);
        document.getElementById('title').innerHTML=messageEvent.data;

  }
</script>
 </body>
</html>