Проблема Javascript с глобальным предупреждением о подтверждении внешней ссылки
-
20-08-2019 - |
Вопрос
Ниже приведен код из плагина для Joomla.Он работает сам по себе, и его цель - обнаруживать внешние ссылки на странице и принудительно вводить их в новые окна браузера с помощью _blank.
Я пытался около часа (я не очень хорошо знаю javascript), но, похоже, не могу понять, как заставить работать функцию onclick.
В конечном результате я хочу добавить к этому скрипту возможность диалогового окна подтверждения, показанного во 2-м разделе кода.
При нажатии на внешнюю ссылку появится диалоговое окно подтверждения, и если в нем будет указано "да", они смогут перейти по внешнему URL-адресу, открывшись в новом окне.В противном случае он отменяется и ничего не делает.
Когда я создаю ссылку с
onclick="return ExitNotice(this.href);"внутри него это работает отлично, но поскольку на моем веб-сайте есть несколько пользователей, отправляющих свои данные, я бы хотел, чтобы окно подтверждения было глобальным.
this.blankwin = function(){
var hostname = window.location.hostname;
hostname = hostname.replace("www.","").toLowerCase();
var a = document.getElementsByTagName("a");
this.check = function(obj){
var href = obj.href.toLowerCase();
return (href.indexOf("http://")!=-1 && href.indexOf(hostname)==-1) ? true : false;
};
this.set = function(obj){
obj.target = "_blank";
obj.className = "blank";
};
for (var i=0;i<a.length;i++){
if(check(a[i])) set(a[i]);
};
};
this.addEvent = function(obj,type,fn){
if(obj.attachEvent){
obj['e'+type+fn] = fn;
obj[type+fn] = function(){obj['e'+type+fn](window.event );}
obj.attachEvent('on'+type, obj[type+fn]);
} else {
obj.addEventListener(type,fn,false);
};
};
addEvent(window,"load",blankwin);
Вторая Часть
/* ----------
OnClick External Link Notice
---------- */
function ExitNotice(link,site,ltext) {
if(confirm("-----------------------------------------------------------------------\n\n" +
"You're leaving the HelpingTeens.org website. HelpingTeens.org\ndoes not " +
"control this site and its privacy policies may differ\nfrom our own. " +
"Thank you for using our site.\n\nYou will now access the following link:\n" +
"\n" + link + "\n\nPress \'OK\' to proceed, or press \'Cancel\' to remain here." +
"\n\n-----------------------------------------------------------------------"))
{
return true;
}
history.go(0);
return false;
}
А) Кто-нибудь может помочь мне решить эту проблему?или Б) Есть ли лучшее решение?
Решение
Итак, я кратко изложу то, о чем, по моему мнению, вы спрашиваете, а затем расскажу вам, как, по моему мнению, это можно решить.Возможно, я неправильно понял ваш вопрос.
У вас есть код, который проходит через все теги и устанавливает для их целевого атрибута значение "_blank", а для их имени класса - значение "blank", и вы хотели бы вместо этого переписать ссылки, чтобы использовать JavaScript для отображения диалогового окна подтверждения и перехода к местоположению только в том случае, если пользователь нажмет "Да".
В этом случае, я полагаю, вы хотите, чтобы ссылки заканчивались так, как если бы они были написаны следующим образом:
<a href="javascript:void(0)" onclick="if (ExitNotice('http://www.whatever.com')) window.location.assign('http://www.whatever.com')">
Javascript:void(0) приводит к тому, что обычная обработка браузером клика не приводит к переходу на другую страницу, так что у вашего onclick есть время для выполнения.
Чтобы это произошло, вам нужно изменить определение this.set (внутри this.blankwin) на что-то вроде этого:
this.set = function(obj){
var href = obj.href;
obj.href = "javascript:void(0)";
obj.onclick = function() { (if ExitNotice(href) window.location.assign(href); };
obj.target = "_blank";
obj.className = "blank";
};
Видишь здесь для получения информации о void(0).
Также обратите внимание, что код, который устанавливает obj.className в "пустой", не очень хорош, потому что он удалит любое другое className, уже назначенное ссылке.Вместо этого вы могли бы просто добавить имя класса к существующим, вот так:
obj.className = obj.className + " blank";
Другие советы
Сейчас все работает так, как я хочу.Спасибо вам за вашу помощь.Поскольку это мой первый раз, когда я использую SO, я надеюсь, что зачислил вас правильно.Поскольку я не могу понять, как (или даже возможно ли это) отображать код в полях для комментариев, я решаю ответить на свой собственный вопрос окончательным кодом, чтобы другим было выгодно.
Еще раз, вы показали мне синтаксис, который мне нужно было изменить, чтобы заставить его работать так, как я хотел.
Спасибо!
Окончательный код
this.set = function(obj){
var href = obj.href;
//obj.href = "javascript:void(0)";
obj.onclick = function() { return ExitNotice(href)};
obj.target = "_blank";
obj.className = obj.className + " blank";
};
Я еще немного доработал код.Пожалуйста, рассмотрите возможность изменения mfblank.js на следующий контент.Итак, теперь весь Скрипт находится только в одном файле И добавлен дополнительный rel=nofollow .Получайте удовольствие от этого сценария...
this.blankwin = function(){
var hostname = window.location.hostname;
hostname = hostname.replace("www.","").toLowerCase();
var a = document.getElementsByTagName("a");
this.check = function(obj){
var href = obj.href.toLowerCase();
return (href.indexOf("http://")!=-1 && href.indexOf(hostname)==-1) ? true : false;
};
this.set = function(obj){
var href = obj.href;
obj.onclick = function(){ if(confirm("Do you wanne leave this page?")) {
return true;
}
history.go(0);
return false;
};
obj.target = "_blank";
obj.className = obj.className + " blank";
obj.rel = "nofollow";
};
for (var i=0;i<a.length;i++){
if(check(a[i])) set(a[i]);
};
};
this.addEvent = function(obj,type,fn){
if(obj.attachEvent){
obj['e'+type+fn] = fn;
obj[type+fn] = function(){obj['e'+type+fn](window.event );}
obj.attachEvent('on'+type, obj[type+fn]);
} else {
obj.addEventListener(type,fn,false);
};
};
addEvent(window,"load",blankwin);