Как заблокировать любые переходы по ссылке в определенном контейнере?

05 июля 2021, 22:30

Я загружаю cURL'ом чужой сайт, и вывожу его (полностью весь сайт) внутри своего домена.

Для общего понимая поясню: вверху размещена моя шапка сайт. потом полностью весь чужой сайт. потом мой футер. Получается что-то типа:

<div class="my_header>...</div>
    <div class="site_donor">.......</div>
<div class="my_footer>...</div>

Я хочу сделать чтобы любой клик по ссылке внутри блока site_donor перехватывался бы, и не происходил переход на ссылку.

Тут по сути просто:

$(".site_donor").on('click', 'a', function() { ... });

Но у некоторых сайтов-доноров клик по ссылке перехватывает их же JavaScript, и каким-то образом делает перенаправление куда им нужно.

Как обойти это? Хотелось бы чтобы в блоке site_donor любые скрипты которые отвечают за перенаправление были не активны.

Как например это сделано у яндекс или гугл переводчика сайтов...

Буду благодарен за информацию!

Answer 1

[... document.links].forEach (a => a.style ['pointer-events'] = 'none')

Answer 2

Как вариант можно используя e.preventDefault() и $(".site_donor a").unbind('click');:

$(document).ready(function (e) { 
  $(".site_donor a").unbind("click");  // <<< выключаем обработку нажатий в site_donor 
  $(".site_donor a").click('click', function(e) { 
    e.preventDefault();  // <<< предотвращаем переход по ссылке 
     
    alert($(this).text() + " my handler"); 
     
    // ... do smth 
  });   
});

.my_header, .my_footer { 
  border: 1px solid black; 
  min-height: 20px; 
  padding: 5px; 
} 
 
.site_donor { 
  margin-top: 10px; 
  margin-bottom: 10px; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<div class="my_header">header</div> 
    <div class="site_donor"> 
      <div class="content"> 
        <a href="#">link 1</a> 
        <a href="https://google.com">link 2</a> 
      </div> 
       
      <script type="text/javascript"> 
        /* 
          внутренние обработчики 
        */ 
        $(document).ready(function() { 
          $(".content a").on("click", function() { 
            alert($(this).text() + " site_donor"); 
          }); 
        }); 
      </script> 
       
    </div> 
<div class="my_footer"></div>