How to detect Adblock plguin?
如何偵測有否安裝 AdBlock 插件。
Last updated
如何偵測有否安裝 AdBlock 插件。
Last updated
// for: detect ad blockers
var e = document.createElement('div');
e.id = 'AntiAdblock-dwZxflhAIjQK';
e.style.display = 'none';
document.body.appendChild(e);@page "/"
@using Microsoft.AspNetCore.Components.Web
@namespace YourProject.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
Layout = null;
}
<!DOCTYPE html>
<html lang="zh-hant">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>YourProject</title>
<base href="~/" />
<link href="YourProject.styles.css" rel="stylesheet" />
@* for: detect ad blockers *@
<style>
#AntiAdblock-nZqKGXDfpEMl {
display: none;
position: fixed;
z-index: 9999;
top: 0;
width: 100%;
padding: 40px 10px;
background: #D30000;
text-align: center;
font-weight: bold;
color: #fff;
}
#AntiAdblock-nZqKGXDfpEMl .dismiss {
cursor: pointer;
color: inherit;
}
</style>
</head>
<body>
<component type="typeof(App)" render-mode="Server" />
@* for: detect ad blockers *@
<div id="AntiAdblock-nZqKGXDfpEMl">
偵測到 AdBlock 插件這可能影響到某些效能，如: YouTube 影音播放功能，請考慮關閉 AdBlock。
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.server.js"></script>
@* for: detect ad blockers
ref→[Most effective way to detect ad blockers](https://www.detectadblock.com/)
*@
<script src="/kampyle.js" type="text/javascript"></script>
<script type="text/javascript">
if (!document.getElementById('AntiAdblock-dwZxflhAIjQK')) {
const antiadblock = document.getElementById('AntiAdblock-nZqKGXDfpEMl');
antiadblock.style.display = 'block';
antiadblock.getElementsByClassName('dismiss')[0].onclick = function () {
antiadblock.style.display = 'none';
};
}
</script>
</body>
</html>