Представьте, что вы ведете блог или интернет-магазин и хотите показывать определенные товары или статьи только жителям конкретных стран. Или наоборот — вам нужно скрыть кнопку оплаты для стран, где ваш сервис не работает.
Как это работает:
* Определение локации: Скрипт обращается к сервису ipapi.co, чтобы узнать, из какой страны пришел посетитель.
* Проверка прав: Он ищет на странице специальные блоки с пометкой data-geo-hide.
* Блокировка: Если код страны пользователя совпадает со списком запрещенных для этого блока, содержимое исчезает.
* Заглушка: Вместо скрытого контента пользователь видит аккуратную серую плашку с сообщением: «Контент недоступен в вашем регионе» и указанием его страны.
Главные плюсы:
* Стильный дизайн: В скрипт уже встроены современные CSS-стили для уведомления (закругленные углы, приятные шрифты).
* Мультиязычность: Названия стран автоматически переводятся на русский язык.
* Гибкость: Можно скрыть один блок для США, а другой — для Германии и Франции одновременно.
Код
<style>
.geo-inline-note {
padding: 14px 16px;
border-radius: 14px;
background: rgba(17, 24, 39, .06);
border: 1px solid rgba(17, 24, 39, .14);
font: 14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
color: #111827;
}
.geo-inline-note b {
font-weight: 700;
}
.geo-inline-note .geo-inline-title {
margin: 0 0 6px;
font-size: 16px;
}
.geo-inline-note .geo-inline-sub {
margin: 0;
opacity: .9;
}
.geo-inline-note .geo-inline-meta {
margin-top: 10px;
font-size: 12px;
opacity: .75;
}
</style>
.geo-inline-note {
padding: 14px 16px;
border-radius: 14px;
background: rgba(17, 24, 39, .06);
border: 1px solid rgba(17, 24, 39, .14);
font: 14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
color: #111827;
}
.geo-inline-note b {
font-weight: 700;
}
.geo-inline-note .geo-inline-title {
margin: 0 0 6px;
font-size: 16px;
}
.geo-inline-note .geo-inline-sub {
margin: 0;
opacity: .9;
}
.geo-inline-note .geo-inline-meta {
margin-top: 10px;
font-size: 12px;
opacity: .75;
}
</style>
Код
<script>
(function () {
"use strict";
var COUNTRY_RU = {
RU: "Россия",
UA: "Украина",
BY: "Беларусь",
KZ: "Казахстан",
MD: "Молдова",
RO: "Румыния",
PL: "Польша",
DE: "Германия",
FR: "Франция",
IT: "Италия",
ES: "Испания",
GB: "Великобритания",
US: "США",
CA: "Канада",
TR: "Турция",
IL: "Израиль",
GE: "Грузия",
AM: "Армения",
AZ: "Азербайджан",
LV: "Латвия",
LT: "Литва",
EE: "Эстония",
CZ: "Чехия",
SK: "Словакия",
BG: "Болгария"
};
function escapeHtml(s) {
return String(s).replace(/[&<>"']/g, function (c) {
return ({ "&":"&","<":"<",">":">",'"':""","'":"'" })[c];
});
}
function getGeo() {
return fetch("https://ipapi.co/json/", { cache: "no-store" })
.then(function (r) { return r.json(); })
.then(function (d) {
return {
code: d && d.country_code ? String(d.country_code).toUpperCase() : "",
name: d && d.country_name ? String(d.country_name) : ""
};
});
}
function normalizeCountry(geo) {
var code = geo.code || "??";
var name = geo.name || COUNTRY_RU[code] || "Неизвестная страна";
return { code: code, name: name };
}
function renderPlaceholder(node, geo) {
node.innerHTML =
'<div class="geo-inline-note">' +
'<p class="geo-inline-title">⛔ Контент недоступен в вашем регионе.</p>' +
'<p class="geo-inline-sub">Доступ для страны <b>' +
escapeHtml(geo.name) + '</b> (' + escapeHtml(geo.code) + ') ограничен.</p>' +
'<div class="geo-inline-meta">Страна определяется по IP адресу.</div>' +
'</div>';
}
function onReady(fn) {
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", fn);
} else {
fn();
}
}
onReady(function () {
var nodes = document.querySelectorAll("[data-geo-hide]");
if (!nodes.length) return;
getGeo().then(function (geoRaw) {
var geo = normalizeCountry(geoRaw);
if (!geo.code || geo.code === "??") return;
nodes.forEach(function (node) {
var list = String(node.getAttribute("data-geo-hide") || "")
.split(",")
.map(function (x) { return x.trim().toUpperCase(); })
.filter(Boolean);
if (list.indexOf(geo.code) !== -1) {
renderPlaceholder(node, geo);
}
});
});
});
})();
</script>
(function () {
"use strict";
var COUNTRY_RU = {
RU: "Россия",
UA: "Украина",
BY: "Беларусь",
KZ: "Казахстан",
MD: "Молдова",
RO: "Румыния",
PL: "Польша",
DE: "Германия",
FR: "Франция",
IT: "Италия",
ES: "Испания",
GB: "Великобритания",
US: "США",
CA: "Канада",
TR: "Турция",
IL: "Израиль",
GE: "Грузия",
AM: "Армения",
AZ: "Азербайджан",
LV: "Латвия",
LT: "Литва",
EE: "Эстония",
CZ: "Чехия",
SK: "Словакия",
BG: "Болгария"
};
function escapeHtml(s) {
return String(s).replace(/[&<>"']/g, function (c) {
return ({ "&":"&","<":"<",">":">",'"':""","'":"'" })[c];
});
}
function getGeo() {
return fetch("https://ipapi.co/json/", { cache: "no-store" })
.then(function (r) { return r.json(); })
.then(function (d) {
return {
code: d && d.country_code ? String(d.country_code).toUpperCase() : "",
name: d && d.country_name ? String(d.country_name) : ""
};
});
}
function normalizeCountry(geo) {
var code = geo.code || "??";
var name = geo.name || COUNTRY_RU[code] || "Неизвестная страна";
return { code: code, name: name };
}
function renderPlaceholder(node, geo) {
node.innerHTML =
'<div class="geo-inline-note">' +
'<p class="geo-inline-title">⛔ Контент недоступен в вашем регионе.</p>' +
'<p class="geo-inline-sub">Доступ для страны <b>' +
escapeHtml(geo.name) + '</b> (' + escapeHtml(geo.code) + ') ограничен.</p>' +
'<div class="geo-inline-meta">Страна определяется по IP адресу.</div>' +
'</div>';
}
function onReady(fn) {
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", fn);
} else {
fn();
}
}
onReady(function () {
var nodes = document.querySelectorAll("[data-geo-hide]");
if (!nodes.length) return;
getGeo().then(function (geoRaw) {
var geo = normalizeCountry(geoRaw);
if (!geo.code || geo.code === "??") return;
nodes.forEach(function (node) {
var list = String(node.getAttribute("data-geo-hide") || "")
.split(",")
.map(function (x) { return x.trim().toUpperCase(); })
.filter(Boolean);
if (list.indexOf(geo.code) !== -1) {
renderPlaceholder(node, geo);
}
});
});
});
})();
</script>
Как применять этот скрипт на странице
Чтобы ограничить конкретный блок, достаточно добавить атрибут data-geo-hide.
Пример:
Код
<div data-geo-hide="RU,BY">
<h3>Онлайн покупка товара.</h3>
<button>оплатит заказ.</button>
</div>
<h3>Онлайн покупка товара.</h3>
<button>оплатит заказ.</button>
</div>
В этом примере:
пользователи из RU и BY увидят уведомление о недоступности контента;
пользователи из других стран увидят оригинальный блок.
Таким образом можно ограничивать любое количество элементов на странице
