Displaying placeholder content when an element is removed by an extension or adblocker

user_3640355 0
Viewed 59

I trying to integrate some user feedback tools into out application, and part of this required embedding an iframe into the application. I am using Privacy Badger, and it blocks all the content of the iframe and changes the display property to none all the time. That's all well and good, i'm not trying to force this past peoples privacy extensions, however I do want to be able to detect if it has been removed, and just display some placeholder text like "This was removed by an adblocker. Feel free to email us if you have feedback" so that the app doesn't feel broken.

My Current Attempt: Code Sandbox

This however doesn't display the fallback as I would like it to.

I have tried various renditions of this method, all without luck.

Essentially what I want is this: Detect if the iframe element has it's display property set to none, and render a fallback in it's place if that is true.

reactjs iframe
1 Answers

The problem is that you are immediately checking if the style is none, but your test doesn't change it until 5 sec later, so you'd have to wait some time before checking the style.

import React, { useState } from "react";
import ReactDOM from "react-dom";

function App() {
  const [fallback, setFallback] = useState(0);
  const setNoneDisplay = () => {
    const el = document.getElementById("red-rover");
    el.style.display = "none";
  };
  React.useEffect(() => {
    window.setTimeout(setNoneDisplay, 5000);
  });

  const refCallback = React.useCallback((node) => {
    if (node) setTimeout(() => setFallback(node.style.display === "none"), 6000);
  }, []);

  return (
    <div className="App">
      <div id="red-rover" ref={refCallback}>
        Displayed
      </div>

      {fallback ? <div>Only Displayed As Fallback</div> : null}
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
user_60278910
Related