当元素被扩展程序或广告拦截器删除时显示占位符内容

Question

我试图将一些用户反馈工具集成到我们的应用程序中，其中一部分需要将 iframe 嵌入到应用程序中。我正在使用 Privacy Badger，它会阻止 iframe 的所有内容，并始终将显示属性更改为 none。一切都很好，我并不是要强制执行过去的人们隐私扩展，但是我确实希望能够检测它是否已被删除，并且只显示一些占位符文本，例如“这已被广告拦截器删除。感觉如果您有任何反馈意见，请随时给我们发送电子邮件”，这样应用程序就不会被损坏。

我目前的尝试：Code Sandbox

然而，这并没有像我希望的那样显示回退。

我已经尝试过这种方法的各种版本，但都没有成功。

基本上我想要的是：检测 iframe 元素是否将其显示属性设置为 none，如果是，则在其位置呈现回退。

Answer 1

问题是您立即检查样式是否为 none，但您的测试直到 5 秒后才更改它，因此您必须等待一段时间才能检查样式。

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);

当元素被扩展程序或广告拦截器删除时显示占位符内容

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

iframe

reactjs