Author: John Au-Yeung

Sometimes, we want to check if a website is open in another tab with JavaScript.

In this article, we’ll look at how to check if a website is open in another tab with JavaScript.

How to check if a website is open in another tab with JavaScript?

To check if a website is open in another tab with JavaScript, we use the BroadcastChannel constructor.

For instance, we write

const bc = new BroadcastChannel("my-awesome-site");

bc.onmessage = (event) => {
  if (event.data === `is-open`) {
    bc.postMessage(`yes`);
    alert(`Another tab of this site just got opened`);
  }
  if (event.data === `yes`) {
    alert(`An instance of this site is already running`);
  }
};

bc.postMessage(`is-open`);

to create a BroadcastChannel on our site.

Then we set is onmessage property to a function that checks for messages with event.data.

We call postMessage to send data to all the tabs.

If onmessage is called, this means at least 1 tab is open.

Conclusion

To check if a website is open in another tab with JavaScript, we use the BroadcastChannel constructor.

Sometimes, we want to use JavaScript to detect whether the URL exists before display in iframe.

In this article, we’ll look at how to use JavaScript to detect whether the URL exists before display in iframe.

How to use JavaScript to detect whether the URL exists before display in iframe?

To use JavaScript to detect whether the URL exists before display in iframe, we use fetch.

For instance, we write

const openHelp = async (urlToOpen) => {
  const defaultURL = `http://example.com`;
  const response = await fetch(urlToOpen);

  if (response.status === 200) {
    window.open(urlToOpen, `_blank`);
  } else if (response.status === 404) {
    window.open(defaultURL, `_blank`);
  }
};

to define the openHelp function.

In it, we check if the urlToOpen URL is available with fetch.

We make a get request to it and check if status code.

If it’s 200, then we call window.open to open the urlToOpen URL.

If it’s 404, then we call window.open to open the defaultURL.

Conclusion

To use JavaScript to detect whether the URL exists before display in iframe, we use fetch.

Sometimes, we want to encode a string in JavaScript for displaying in HTML.

In this article, we’ll look at how to encode a string in JavaScript for displaying in HTML.

How to encode a string in JavaScript for displaying in HTML?

To encode a string in JavaScript for displaying in HTML, we create a text node.

For instance, we write

document.body.appendChild(document.createTextNode("foo<bar>baz"));

to call createTextNode to create a text node with the text.

Then we call document.body.appendChild to append the text= node as the last child of the body element.

Conclusion

To encode a string in JavaScript for displaying in HTML, we create a text node.