Автор Тема: AdBlock Plus and JS Banners  (Прочетена 3414 пъти)

0 Потребители и 1 Гост преглежда(т) тази тема.

jazzman

  • Hero Member
  • *****
  • Благодарности
  • -Казани: 25
  • -Получени: 191
  • Публикации: 3624
AdBlock Plus and JS Banners
« -: 26 Април 2013, 04:00:37 »
Hey guys,
напраих едни js модификации към един уеб сайт за реклама на cottage (вила).
Хващам всички img elements идващи от базата към тази таблица и ги въртя през javascript. Това е сайта - http://cottageportal.com/Detail.cfm?RecordID=2360
Проблема е, че ако клиента има AdBlock Plus активиран снимките не се въртят и въобще не се показват.
Има ли начин да се разблокира (заобиколи) тази рестрикция на adblock-a в случай, че клинта има такъв активиран такъв в браузъра си?
Java is to Javascript as fun is to funeral.

http://nau4i.me/forum/index.php/topic,15129.0.html

metost

  • Administrator
  • Hero Member
  • *****
  • Благодарности
  • -Казани: 13
  • -Получени: 41
  • Публикации: 764
Re: AdBlock Plus and JS Banners
« Отговор #1 -: 26 Април 2013, 08:45:10 »
Не мисля, че може да се заобиколи или поне аз не съм виждал начин. Но има разни врътки с които можеш да провериш дали потребителя има инсталиран adblock и съответно да му праснеш някъде съобщение.
(рɐǝɥ ɹпoʎ uɹпʇ ʇ,uoр)

HD

  • Administrator
  • Hero Member
  • *****
  • Благодарности
  • -Казани: 208
  • -Получени: 165
  • Публикации: 3077
Re: AdBlock Plus and JS Banners
« Отговор #2 -: 26 Април 2013, 09:09:11 »
Съгласен съм с @metost. Според мен няма как да го излъжеш.  Никога не съм ползвал подобен софт, но имам някакъв спомен, че можеше да го изключваш за определени сайтове, тоест например на твоя сайт да работи, а на другите да блокира flash-a и javascript-a.

jazzman

  • Hero Member
  • *****
  • Благодарности
  • -Казани: 25
  • -Получени: 191
  • Публикации: 3624
Re: AdBlock Plus and JS Banners
« Отговор #3 -: 26 Април 2013, 14:55:08 »
Хм....и тва е вариант да се направи проверка за активиран adBlock Plus и ако резултата е true, да сe сложи снимка от галерията.

Thanks guys :)

jazz....
« Последна редакция: 26 Април 2013, 14:57:43 от jazzman »
Java is to Javascript as fun is to funeral.

http://nau4i.me/forum/index.php/topic,15129.0.html

jazzman

  • Hero Member
  • *****
  • Благодарности
  • -Казани: 25
  • -Получени: 191
  • Публикации: 3624
Re: AdBlock Plus and JS Banners
« Отговор #4 -: 26 Април 2013, 21:14:58 »
Добре де, де да я сложа таз проверка - така като гледам js успешно манипулира DOM с включен и изключен adblock.

Направих double check през firebug и всичките елементи се създават,  дори и "marquee" елемента се върти успешно горе в хедъра.
 
Не мога да разбера къде точно ми блокира кода.

Идеи, че старата ми глава взе да изпушва :)
Java is to Javascript as fun is to funeral.

http://nau4i.me/forum/index.php/topic,15129.0.html

jazzman

  • Hero Member
  • *****
  • Благодарности
  • -Казани: 25
  • -Получени: 191
  • Публикации: 3624
Re: AdBlock Plus and JS Banners
« Отговор #5 -: 26 Април 2013, 21:42:27 »
Само да спомена с няколко думи за този сайт.

Сайта е разделен на секции в които потребителите да могат да слагат някакъв текст в определените за това секции, информация за cottage-a, цени и т.н...както виждате аз това съм го направил. 

Но....точно тази секция е предвидена за качване на снимки и нищо друго. Именно затова аз там не мога да пиша HTML, но с javascript успях да манипулирам DOM и да създавам собствен стайлинг.

Прочетох някои неща в мрежата за проверка на активиран adblock, но всички те са свързани с създаване на чист HTML, но пак казвам нямам възможност да пиша HTML към тази секция.
Java is to Javascript as fun is to funeral.

http://nau4i.me/forum/index.php/topic,15129.0.html

jazzman

  • Hero Member
  • *****
  • Благодарности
  • -Казани: 25
  • -Получени: 191
  • Публикации: 3624
Re: AdBlock Plus and JS Banners
« Отговор #6 -: 29 Април 2013, 16:11:51 »
Публикувам кода в случай че на някой му е интересно какво съм написал и ако в бъдеще има подобен проблем, може свободно да го ползва или да си го едитва....

Кода е тестван за сега само на локалният ми сървър, все още не съм го имплементирал в/у сайто който е споменат по-горе, поради редица рестрикции от негова страна.

Динамично се създават таблиците и елементите през js понеже не мога да пиша или едитвам сорс кода към сайта.

Създаването на marquee елемента чрез функцията addElement е коментиран защото не представлява интерес в тази ситуация и работи коректно. 

Проверката на активиран adBlock го правя чрез вземане височината към div с id "myTestAd", ако има височина значи не е активен, ако висoчината е 0  това значи че блокира снимките към банера.

Осаканета таблица която ще видите в index.html е резултат от блокирането на банера и генериран техен код, нея я премахвам през js и на нейно място създавам нова със статичната снимка колкото да не се чупи CSS-a.

В общи линии е това. Не е добра практика да се ползват глобални променливи в js, но по-късно ще оправя и това.

INDEX.HTML

Код: Text
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>                
  4.         <title>Block AdBlock test page</title>
  5.         <script type="text/javascript" src="js/functions.js"></script>
  6.     </head>
  7.  
  8.     <body>
  9.         <h2>Block AdBlock test page</h2>
  10.        
  11.         <table cellpadding="10" bordercolor="#000000" bgcolor="#666666">
  12.            
  13.         </table>
  14.     </body>
  15. </html>
  16.  

FUNCTIONS.JS

Код: Javascript
  1.  
  2. window.onload = choosePic;
  3. var my_div = null;
  4. var newDiv = null;
  5. var thisAd = 0;
  6. var adImages = new Array("images/1.jpg","images/3.jpg","images/4.jpg","images/5.jpg","images/7.jpg");
  7.  
  8. function choosePic() {
  9.    
  10.     generate_table();
  11.    
  12.     thisAd = Math.floor((Math.random() * adImages.length));
  13.    
  14.     rotate();
  15.    
  16.     // call a marquee function
  17.     //addElement();
  18.  
  19. }
  20.  
  21. function rotate() {
  22.    
  23.     thisAd++;
  24.    
  25.     if (thisAd == adImages.length) {
  26.         thisAd = 0;
  27.     }
  28.    
  29.    if(document.getElementById("adBanner") === null) return false;
  30.    
  31.    document.getElementById("adBanner").src = adImages[thisAd];
  32.  
  33.    setTimeout("rotate()", 3 * 1000);
  34. }
  35.  
  36. function addElement() {
  37.    
  38.    // add a marquee style
  39.   // find a h1 elements
  40.   var x = document.getElementsByTagName("h1")[0];
  41.   var y = document.getElementsByTagName("td")[11];
  42.   y.setAttribute('id','org_h1');
  43.   // create a new div element
  44.   // and give it some content
  45.   newDiv = document.createElement("marquee");
  46.   newContent = document.createTextNode("For more information go to www.cottageparadise.ca");
  47.   newDiv.appendChild(newContent); //add the text node to the newly created div.
  48.  
  49.   // add the newly created element and it's content into the DOM
  50.  
  51.   my_div = document.getElementById("org_h1");
  52.  
  53.   my_div.insertBefore(newDiv, x);
  54.  
  55. }
  56. function blockAdblockUser() {
  57.  
  58.     if(document.getElementById('myTestAd')) {
  59.         var h = document.getElementById('myTestAd').clientHeight;
  60.         // check if the adBlock is turn on
  61.         if(h == 0) {
  62.          // remove parts and hide the html and the js tables
  63.          RemoveHtmlTable()
  64.          // call a new table without any rotations  
  65.          generate_static_table();  
  66.         }    
  67.     }
  68.  
  69. }
  70.  
  71. function generate_table() {
  72.  
  73.     // get the reference for the body (table row in that case)
  74.     var body = document.getElementsByTagName("body")[0];
  75.    
  76.     // creates a <table> element and a <tbody> element
  77.     var tbl = document.createElement("table");
  78.     var tblBody = document.createElement("tbody");
  79.    
  80.     // creates a table row
  81.     var row = document.createElement("tr");
  82.     // sets the bgcolor attribute to the row;
  83.     row.setAttribute("bgcolor", "#CCCCCC");
  84.     // Create a <td> element and a text node, make the text
  85.     // node the contents of the <td>, and put the <td> at
  86.     // the end of the table row
  87.     var cell = document.createElement("td");
  88.     // sets the bgcolor attribute to the cell;
  89.     cell.setAttribute("bordercolor", "#000000");
  90.      
  91.     var div = document.createElement("div");
  92.     // sets the id attribute to the myTestAd div;
  93.     div.setAttribute("id", "myTestAd");
  94.    
  95.     // creates an anchor element
  96.     var a = document.createElement("a");
  97.     //sets the href attribute
  98.     a.setAttribute("href", "Photos.cfm?PhotosID=2360");
  99.      
  100.     var img = document.createElement("img");
  101.    
  102.     a.appendChild(img);
  103.  
  104.     div.appendChild(a);
  105.      
  106.     cell.appendChild(div);
  107.      
  108.     row.appendChild(cell);
  109.    
  110.     // add the row to the end of the table body
  111.     tblBody.appendChild(row);
  112.  
  113.     // put the <tbody> in the <table>
  114.     tbl.appendChild(tblBody);
  115.  
  116.     // appends <table> into <body>
  117.     body.appendChild(tbl);
  118.    
  119.     // sets the attributes of tbl;
  120.     tbl.setAttribute("cellpadding", "10");
  121.     tbl.setAttribute("bordercolor", "#000000");
  122.     tbl.setAttribute("bgcolor", "#666666");
  123.    
  124.     //sets the attributes of image
  125.     img.setAttribute("src", "images/1.jpg");
  126.      
  127.     img.setAttribute("id", "adBanner");
  128.    
  129.     img.setAttribute("width", 300);
  130.    
  131.     img.setAttribute("height", 200);
  132.    
  133.     img.setAttribute("align", "top");
  134.    
  135.     img.setAttribute("border", 2);
  136.    
  137.     img.setAttribute("alt", "Trent Hills' Piece of Paradise");
  138.    
  139.     blockAdblockUser();
  140.    
  141.     RemoveHtmlTable();
  142. }
  143.  
  144. function generate_static_table() {
  145.      
  146.     // get the reference for the body (table row in that case)
  147.     var body = document.getElementsByTagName("body")[0];
  148.  
  149.     // creates a <table> element and a <tbody> element
  150.     var tbl = document.createElement("table");
  151.    
  152.     var tblBody = document.createElement("tbody");
  153.  
  154.     // creates a table row
  155.     var row = document.createElement("tr");
  156.     // sets the bgcolor attribute to the row;
  157.     row.setAttribute("bgcolor", "#CCCCCC");
  158.     // Create a <td> element and a text node, make the text
  159.     // node the contents of the <td>, and put the <td> at
  160.     // the end of the table row
  161.     var cell = document.createElement("td");
  162.     // sets the bgcolor attribute to the cell;
  163.     cell.setAttribute("bordercolor", "#000000");
  164.    
  165.     // creates an anchor element
  166.     var a = document.createElement("a");
  167.     //sets the href attribute
  168.     a.setAttribute("href", "Photos.cfm?PhotosID=2360");
  169.      
  170.     var img = document.createElement("img");
  171.    
  172.     a.appendChild(img);
  173.    
  174.     cell.appendChild(a);
  175.    
  176.     row.appendChild(cell);
  177.    
  178.     // add the row to the end of the table body
  179.     tblBody.appendChild(row);
  180.  
  181.     // put the <tbody> in the <table>
  182.     tbl.appendChild(tblBody);
  183.  
  184.     // appends <table> into <body>
  185.     body.appendChild(tbl);
  186.     // sets the attributes of tbl;
  187.     tbl.setAttribute("cellpadding", "10");
  188.     tbl.setAttribute("bordercolor", "#000000");
  189.     tbl.setAttribute("bgcolor", "#666666");
  190.    
  191.     //sets the href attribute
  192.     img.setAttribute("src", "images/1.jpg");
  193.    
  194.     img.setAttribute("width", 300);
  195.    
  196.     img.setAttribute("height", 200);
  197.    
  198.     img.setAttribute("align", "top");
  199.    
  200.     img.setAttribute("border", 2);
  201.    
  202.     img.setAttribute("alt", "Trent Hills' Piece of Paradise");
  203.  
  204.     // stop the script
  205.     return false;
  206.    
  207. }
  208.  
  209. function RemoveHtmlTable() {
  210.    
  211.     // get the reference for the body (parent table row in that case)
  212.     var parent = document.getElementsByTagName("body")[0];
  213.    
  214.     var child_t = parent.getElementsByTagName("table")[0];
  215.        
  216.     var throwawayNode = parent.removeChild(child_t);
  217. }
  218.  
« Последна редакция: 29 Април 2013, 16:41:23 от jazzman »
Java is to Javascript as fun is to funeral.

http://nau4i.me/forum/index.php/topic,15129.0.html

jazzman

  • Hero Member
  • *****
  • Благодарности
  • -Казани: 25
  • -Получени: 191
  • Публикации: 3624
Re: AdBlock Plus and JS Banners
« Отговор #7 -: 29 Април 2013, 19:11:24 »
Направих го и към сайта, тествах го с Firefox и GoogleChrome:

http://cottageportal.com/Detail.cfm?RecordID=2360

EDIT:

Добавих и още една функция за рокада на  линка под снимката и новата таблица с insertBefore();

Функциите generate_table() и generate_static_table() са близки по функционалност и код, но съм ги разделил поради проблем с техният js и неудобството да се пише.

Може да се помисли за по добра подредба, но няма да е ся и важното, че работи както исках: )
 
Тва е целият JS за към този сайт:

Код: Javascript
  1. window.onload = choosePic;
  2. var my_div = null;
  3. var newDiv = null;
  4. var thisAd = 0;
  5. var adImages = new Array("ImagesInDatabase/2360_Photo3_800.jpg","ImagesInDatabase/2360_Photo4_900.jpg","ImagesInDatabase/2360_Photo5_300.jpg","ImagesInDatabase/2360_Photo1_800.jpg","ImagesInDatabase/2360_Photo6_300.jpg","ImagesInDatabase/2360_Photo7_2500.jpg","ImagesInDatabase/2360_Photo8_700.jpg","ImagesInDatabase/2360_Photo9_2500.jpg","ImagesInDatabase/2360_Photo10_1900.jpg","ImagesInDatabase/2360_Photo18_2800.jpg","ImagesInDatabase/2360_Photo11_2500.jpg","ImagesInDatabase/2360_Photo12_1900.jpg","ImagesInDatabase/2360_Photo13_1900.jpg","ImagesInDatabase/2360_Photo14_1900.jpg","ImagesInDatabase/2360_Photo15_1900.jpg","ImagesInDatabase/2360_Photo16_200.jpg","ImagesInDatabase/2360_Photo17_800.jpg","ImagesInDatabase/2360_Photo18_900.jpg","ImagesInDatabase/2360_Photo19_1900.jpg");
  6.  
  7. function choosePic() {
  8.  
  9.   // generate a table
  10.     generate_table();
  11.    
  12.     // insert an anchor after the new table
  13.     insertAfter();
  14.    
  15.     thisAd = Math.floor((Math.random() * adImages.length));
  16.    
  17.     rotate();
  18.    
  19.     // call a marquee function
  20.     addElement();
  21.  
  22. }
  23.  
  24. function rotate() {
  25.    
  26.     thisAd++;
  27.    
  28.     if (thisAd == adImages.length) {
  29.         thisAd = 0;
  30.     }
  31.    
  32.    if(document.getElementById("adBanner") === null) return false;
  33.    
  34.    document.getElementById("adBanner").src = adImages[thisAd];
  35.  
  36.    setTimeout("rotate()", 3 * 1000);
  37. }
  38.  
  39. function addElement() {
  40.    
  41.    // add a marquee style
  42.   // find a h1 elements
  43.   var x = document.getElementsByTagName("h1")[0];
  44.   var y = document.getElementsByTagName("td")[11];
  45.   y.setAttribute('id','org_h1');
  46.   // create a new div element
  47.   // and give it some content
  48.   newDiv = document.createElement("marquee");
  49.   newContent = document.createTextNode("For more information go to www.cottageparadise.ca");
  50.   newDiv.appendChild(newContent); //add the text node to the newly created div.
  51.  
  52.   // add the newly created element and it's content into the DOM
  53.  
  54.   my_div = document.getElementById("org_h1");
  55.  
  56.   my_div.insertBefore(newDiv, x);
  57.  
  58. }
  59. function blockAdblockUser() {
  60.  
  61.     if(document.getElementById('myTestAd')) {
  62.         var h = document.getElementById('myTestAd').clientHeight;
  63.         // check if the adBlock is turn on
  64.         if(h == 0) {
  65.          // remove parts and hide the html and the js tables
  66.          RemoveHtmlTable()
  67.          // call a new table without any rotations  
  68.          generate_static_table();  
  69.         }    
  70.     }
  71.  
  72. }
  73.  
  74. function generate_table() {
  75.  
  76.     // get the reference for the body (table row in that case)
  77.     var body = document.getElementsByTagName("td")[15];
  78.    
  79.     // creates a <table> element and a <tbody> element
  80.     var tbl = document.createElement("table");
  81.     var tblBody = document.createElement("tbody");
  82.    
  83.     // creates a table row
  84.     var row = document.createElement("tr");
  85.     // sets the bgcolor attribute to the row;
  86.     row.setAttribute("bgcolor", "#CCCCCC");
  87.     // Create a <td> element and a text node, make the text
  88.     // node the contents of the <td>, and put the <td> at
  89.     // the end of the table row
  90.     var cell = document.createElement("td");
  91.     // sets the bgcolor attribute to the cell;
  92.     cell.setAttribute("bordercolor", "#000000");
  93.      
  94.     var div = document.createElement("div");
  95.     // sets the id attribute to the myTestAd div;
  96.     div.setAttribute("id", "myTestAd");
  97.    
  98.     // creates an anchor element
  99.     var a = document.createElement("a");
  100.     //sets the href attribute
  101.     a.setAttribute("href", "Photos.cfm?PhotosID=2360");
  102.      
  103.     var img = document.createElement("img");
  104.    
  105.     a.appendChild(img);
  106.  
  107.     div.appendChild(a);
  108.      
  109.     cell.appendChild(div);
  110.      
  111.     row.appendChild(cell);
  112.    
  113.     // add the row to the end of the table body
  114.     tblBody.appendChild(row);
  115.  
  116.     // put the <tbody> in the <table>
  117.     tbl.appendChild(tblBody);
  118.  
  119.     // appends <table> into <body>
  120.     body.appendChild(tbl);
  121.    
  122.     // sets the attributes of tbl;
  123.     tbl.setAttribute("cellpadding", "10");
  124.     tbl.setAttribute("bgcolor", "#666666");
  125.    
  126.     //sets the attributes of image
  127.     img.setAttribute("src", "ImagesInDatabase/2360_Photo3_800.jpg");
  128.      
  129.     img.setAttribute("id", "adBanner");
  130.    
  131.     img.setAttribute("width", 300);
  132.    
  133.     img.setAttribute("height", 200);
  134.    
  135.     img.setAttribute("align", "top");
  136.    
  137.     img.setAttribute("border", 2);
  138.    
  139.     img.setAttribute("alt", "Trent Hills' Piece of Paradise");
  140.    
  141.     blockAdblockUser();
  142.    
  143.     RemoveHtmlTable();
  144. }
  145.  
  146. function generate_static_table() {
  147.      
  148.       // get the reference for the body (table row in that case)
  149.     var body = document.getElementsByTagName("td")[15];
  150.  
  151.     // creates a <table> element and a <tbody> element
  152.     var tbl = document.createElement("table");
  153.    
  154.     var tblBody = document.createElement("tbody");
  155.  
  156.     // creates a table row
  157.     var row = document.createElement("tr");
  158.     // sets the bgcolor attribute to the row;
  159.     row.setAttribute("bgcolor", "#CCCCCC");
  160.     // Create a <td> element and a text node, make the text
  161.     // node the contents of the <td>, and put the <td> at
  162.     // the end of the table row
  163.     var cell = document.createElement("td");
  164.     // sets the bgcolor attribute to the cell;
  165.     cell.setAttribute("bordercolor", "#000000");
  166.    
  167.     // creates an anchor element
  168.     var a = document.createElement("a");
  169.     //sets the href attribute
  170.     a.setAttribute("href", "Photos.cfm?PhotosID=2360");
  171.      
  172.     var img = document.createElement("img");
  173.    
  174.     a.appendChild(img);
  175.    
  176.     cell.appendChild(a);
  177.    
  178.     row.appendChild(cell);
  179.    
  180.     // add the row to the end of the table body
  181.     tblBody.appendChild(row);
  182.  
  183.     // put the <tbody> in the <table>
  184.     tbl.appendChild(tblBody);
  185.  
  186.     // appends <table> into <body>
  187.     body.appendChild(tbl);
  188.     // sets the attributes of tbl;
  189.     tbl.setAttribute("cellpadding", "10");
  190.     tbl.setAttribute("bgcolor", "#666666");
  191.    
  192.     //sets the href attribute
  193.     img.setAttribute("src", "ImagesInDatabase/2360_Photo3_800.jpg");
  194.    
  195.     img.setAttribute("width", 300);
  196.    
  197.     img.setAttribute("height", 200);
  198.    
  199.     img.setAttribute("align", "top");
  200.    
  201.     img.setAttribute("border", 2);
  202.    
  203.     img.setAttribute("alt", "Trent Hills' Piece of Paradise");
  204.  
  205.     // stop the script
  206.     return false;
  207.    
  208. }
  209.  
  210. function RemoveHtmlTable() {
  211.    
  212.     // get the reference for the body (parent table row in that case)
  213.     var parent = document.getElementsByTagName("td")[15];
  214.    
  215.     var child_t = parent.getElementsByTagName("table")[0];
  216.        
  217.     var throwawayNode = parent.removeChild(child_t);
  218. }
  219.  
  220. function insertAfter() {
  221.  
  222. var parent = document.getElementsByTagName("td")[15];
  223.  
  224. var tbl = parent.getElementsByTagName("table")[0];
  225.  
  226. var anchors = document.getElementsByTagName("A");
  227.  
  228. for (var i = 0; i < anchors.length; i++) {
  229.    
  230.     if (anchors[i].className == 'highlight') {
  231.    
  232.     parent.insertBefore(anchors[i], tbl.nextSibling);
  233.    
  234.     }
  235.   }
  236. }
  237.  
« Последна редакция: 29 Април 2013, 21:52:29 от jazzman »
Java is to Javascript as fun is to funeral.

http://nau4i.me/forum/index.php/topic,15129.0.html