How to Detect Clipboard Content and Page Visibility Changes in a Web App

In modern web applications it is often necessary to know when a user returns to the app and what data they have copied to the system clipboard. This guide walks through a practical implementation that detects page visibility changes and reads clipboard content.

Listening to Page Visibility

The document.visibilitychange event fires whenever the page becomes hidden or visible. By checking document.visibilityState you can run code only when the page becomes visible :

document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === "visible") {
    console.log("Page became visible");
  }
});

Reading Text from the Clipboard

The Clipboard API ( navigator.clipboard ) allows reading text, but it works only in a secure context (HTTPS or localhost). You can verify the environment with window.isSecureContext :

if (window.isSecureContext && navigator.clipboard) {
  navigator.clipboard.readText().then(text => {
    console.log("Clipboard text:", text);
  });
} else {
  console.log("Clipboard API not available");
}

Combining Visibility and Clipboard Access

Putting the two together, the following snippet runs the clipboard read only when the page becomes visible and the context is secure:

document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === "visible") {
    if (window.isSecureContext && navigator.clipboard) {
      const clipboardAPI = navigator.clipboard;
      setTimeout(() => {
        clipboardAPI.readText().then(text => {
          console.log("text", text);
        });
      }, 1000);
    } else {
      console.log("Clipboard not supported");
    }
  }
});

Handling Image Paste with Clipboard.read()

For image data you need to listen to the paste event and use clipboard.read() , which returns an array of ClipboardItem objects. You can request the image/png type and convert the resulting Blob to a data URL:

document.addEventListener("paste", () => {
  if (window.isSecureContext && navigator.clipboard) {
    const clipboardAPI = navigator.clipboard;
    setTimeout(() => {
      clipboardAPI.read().then(result => {
        result[0].getType("image/png").then(blob => {
          const reader = new FileReader();
          reader.readAsDataURL(blob);
          reader.onload = e => {
            const img = document.createElement("img");
            img.src = e.target?.result;
            document.getElementById("han").appendChild(img);
          };
        });
      });
    }, 1000);
  } else {
    console.log("Clipboard not supported");
  }
});

Full Vue Component Example

<script lang="ts" setup>
document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === "visible") {
    if (window.isSecureContext && navigator.clipboard) {
      const clipboardAPI = navigator.clipboard;
      setTimeout(() => {
        clipboardAPI.read().then(result => {});
      }, 1000);
    } else {
      console.log("不支持 clipboard");
    }
  }
});

document.addEventListener("paste", () => {
  if (window.isSecureContext && navigator.clipboard) {
    const clipboardAPI = navigator.clipboard;
    setTimeout(() => {
      clipboardAPI.read().then(result => {
        result[0].getType("image/png").then(blob => {
          const reader = new FileReader();
          reader.readAsDataURL(blob);
          reader.onload = e => {
            const img = document.createElement("img");
            img.src = e.target?.result;
            const wrapper = document.getElementById("han");
            wrapper.appendChild(img);
          };
        });
      });
    }, 1000);
  } else {
    console.log("不支持 clipboard");
  }
});
</script>

<template>
  <div id="han" class="w-full h-full bg-blue">
    <textarea class="w-300px h-300px"></textarea>
  </div>
</template>

Further Thoughts

After mastering readText and read , you can explore write and writeText to programmatically place data onto the clipboard, such as adding copyright information when copying article content.