时间戳

首页 > 解决方案 > 当扩展程序或广告拦截器删除元素时显示占位符内容

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

问题描述

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

我目前的尝试： 代码沙箱

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

我已经尝试过这种方法的各种演绎，但都没有运气。

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

标签： reactjsiframe

解决方案

问题是您立即检查样式是否为无，但您的测试直到 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);

推荐阅读