重头戏
import React, { useState, useEffect,useRef } from "react";
import Axios from "./axios.js";
//ADblockerdetection
export function Adblockerdetection() {
const [firstname, setfirstname] = useState('');
const [adblock, adblocdetected] = useState(false);
Axios.get("/user").then((result) => {
setfirstname(
result.data.firstname
);
});
useEffect(() => {
return Adblockerdetection();
});
function Adblockerdetection() {
const head = document.getElementsByTagName("head")[0];
const noadblock = () => {
adblocdetected(false);
};
const adblocker = () => {
adblocdetected(true);
};
const script = document.createElement("script");
script.id = "adblock-detection";
script.type = "text/javascript";
script.src = "./public/gpt.js";
script.onload = noadblock;
script.onerror = adblocker;
head.appendChild(script);
//this.adblocdetected() = this.adblocdetected().bind(this);
}
return (
<div>
<div className="AdblockerMessage">
{adblock ? (<div className="modal1">
<div id="adblock_message" >
<h2>HELLO {firstname}</h2>
<p>it looks like you are using an Adblocker. <br/>Please disable
the adblocker for this page!</p>
<button
onClick={() => {
Adblockerdetection( window.location.reload(true));
}}
>
try to proof of Adblocker
</button>
</div>
</div>
) : (
null
)}
</div>
</div>
);
}
export default function Adinjection(props) {
const { adtype, zoneid, id, name } = props;
var therealURL =
"https://marcpassenheim.net/AdServerTest/www/delivery/afr.php?";
var theRandom = Math.floor(Math.random() * 1000000 + 1);
var urlparam = {
zoneid: zoneid,
cb: theRandom,
};
var theURL = Object.keys(urlparam)
.map((key) => key + "=" + urlparam[key])
.join("&");
//the adurl
var construUrl = therealURL + theURL;
//------USEstat--------------------------------------------
//----------------------------------------
const ads = {
bigsky: {
id: id,
name: name,
src: construUrl,
width: "160" + "px",
height: "600" + "px",
},
sky: {
id: id,
name: name,
src: construUrl,
width: "120" + "px",
height: "600" + "px",
},
billboard: {
id: id,
name: name,
src: construUrl,
width: "800" + "px",
height: "250" + "px",
},
bigbillboard: {
id: id,
name: name,
src: construUrl,
width: "970" + "px",
height: "250" + "px",
},
mediumrectangle: {
id: id,
name: name,
src: construUrl,
width: "300" + "px",
height: "250" + "px",
},
hpa: {
id: id,
name: name,
src: construUrl,
width: "300" + "px",
height: "600" + "px",
},
};
//Component where the ADTYPE prop is overgiven
const currentAd = ads[adtype];
//----------------HIDETheSpots-------------------------
const [visible, setAdSpotvisible] = useState(false);
useEffect( () => {
return setAdSpotvisible(true);
}, []);
//setthecomponent to display:none when its not loaded
const divStyleNone = {
display: "none !important",
height:0+'px !important',
width:0+'px !important'
};
const divstyleBlock = {
display: "block",
background: "yellow",
height:'auto',
width:'auto'
};
const [iframe,stateiframe] =useState(<iframe/>)
const containerToProof = useRef()
const isEmpty = containerToProof.current;
if(isEmpty==='undefined'){
console.log('allo')
}
useEffect(()=>{
console.log('saysomething',isEmpty)
},[<iframe/>]);
return (
<div>
<div ref={containerToProof} >
{visible ? (<div style={divstyleBlock}>
<iframe
id={currentAd.id}
name={currentAd.name}
src={currentAd.src}
frameBorder="no"
scrolling="no"
width={currentAd.width}
height={currentAd.height}
allow="autoplay"
/>
</div>):( <div style={divStyleNone}> </div>)
}
</div>
</div>
);
}嗨，我试图证明一个广告服务器的响应。为了检查是哪种类型的响应，我使用useRef()和div上的引用，在那里iframe将被构造，并发送get请求给广告服务器。https:/i.stack.imgur.com3kvMo.png。
广告对象看起来像。
https:/i.stack.imgur.comfe3aL.png。
每当我刷新页面时，console.log语句'saysomething'给了我5次unefined，然后它找到了divs。https:/i.stack.imgur.com2V5bX.png。
5adinjection.js:171 saysomething undefined
adinjection.js:171 saysomething <div>…</div>
adinjection.js:171 saysomething <div>…</div>
adinjection.js:171 saysomething <div>…</div>
adinjection.js:171 saysomething <div>…</div>
adinjection.js:171 saysomething <div>…</div>
adinjection.js:171 saysomething <div>…</div>
adinjection.js:171 saysomething <div>…</div>
adinjection.js:171 saysomething <div>…</div>
adinjection.js:171 saysomething <div>…</div>
adinjection.js:171 saysomething <div>…</div>
问题是我需要内层HTML值立即与存储的值一起工作，否则，当我试图继续在if语句或其他东西时，控制台说'找不到未定义的值等等等等......'。难道我错过了什么东西，我被困在这里的小时，需要帮助。
似乎你必须运行 Adblockerdetection() 只有在第一次挂载之后。为此，你需要将空数组传递给 useEffect 依赖性。另外，async函数应该在useEffect里面。
useEffect(() => {
Axios.get("/user").then(result => {
setfirstname(result.data.firstname);
});
return Adblockerdetection();
}, []);
另外，你得到的是 undefined 因为 containerToProof.current 只分配一次给 isEmpty 变量。所以，与其做 console.log('saysomething',isEmpty) 改为 console.log('saysomething',containerToProof.current) 里面 useEffect.
useEffect(()=>{
console.log('saysomething',containerToProof.current)
},[<iframe/>]);
检查iframe是否已加载
<div ref={containerToProof}>
{visible ? (
<div style={divstyleBlock}>
<iframe
id={currentAd.id}
name={currentAd.name}
src={currentAd.src}
frameBorder="no"
scrolling="no"
width={currentAd.width}
height={currentAd.height}
allow="autoplay"
onLoad={() => {
// iframe is loaded now and here you can call the function
}}
/>
</div>
) : (
<div style={divStyleNone}> </div>
)}
</div>