Отключите все ссылки внутри IFRAME, используя jQuery

Я хочу отключить все ссылки внутри IFRAME, когда люди нажимают на эту ссылку, появится всплывающее предупреждение.

Вот что я до сих пор, но jQuery ничего не делает. Не уверен, что я сделал не так.

<iframe id='templateframe' name='templateframe' src="templates/template<?php echo $templateID; ?>/login.html"></iframe>

$(document).ready(function(){       
        $('#templateframe').contents().find('a').click(function(event) {
            alert("demo only");

            event.preventDefault();

        }); 
});

Спасибо заранее.

Ответы

Ответ 1

Или иначе вы можете поместить script внутри самого iframe и таким образом сократить код таким образом. Я считаю, что это легче.

$(document).ready(function(){       
    $('a').click(function(event) {
        alert("demo only");
        event.preventDefault();
    }); 
});

Ответ 2

Я ожидал бы, что $(document).ready будет выполняться до загрузки содержимого iframe. Попробуйте использовать атрибут onload для iframe.

Ответ 3

Я тоже хотел отключить ссылки iframe и не смог найти решение. Благодаря HTML5 вы можете легко отключить ссылки, просто добавив атрибут sandbox.

<iframe src="externalsite.com" sandbox></iframe>

посмотреть демо

Я надеюсь, что это поможет кому-то найти в сети, тем более, что эти вопросы появляются сначала в Google.

Ответ 4

Решение, упомянутое "LOL" на самом деле работает довольно хорошо. Я случайно наткнулся на это после нескольких часов работы над этим...

Поместите свой iframe в элемент div, затем сделайте div прозрачным и вставьте z-индекс iframe за div. Смотрите этот пример:

<div class="container">
  <iframe class="lockframe" src="www.google.com"></iframe>
</div>

Затем настройте свой CSS следующим образом:

div.container { background: transparent; }
iframe.lockframe { z-index: -2; }

Загрузите свою страницу, и div будет принимать события кликов, а не iframe.

Ответ 6

Ни один из вышеперечисленных ответов не будет работать, если вы, возможно, не загружаете контент локально, потому что к моменту возникновения события window.load iframe обычно не загружается. Вы можете добавить слушателя в iframe, чтобы найти все внутри iframe и отключить их.

$("iframe").load(function() {
    $("iframe").contents().find("a").each(function(index) {
        $(this).on("click", function(event) {
            event.preventDefault();
            event.stopPropagation();
        });
    });
});

Ответ 7

Это общее решение вашей проблемы. Надеюсь, это будет хорошо работать.

$(window).load(function(){
    $('#templateframe').contents().find('a').click(function(event) {
        alert("demo only");
        event.preventDefault();
    }); 
});

Ответ 8

Я думаю, что ни одно из предлагаемых решений (кроме песочницы html5) не будет работать, если вы не установили Access-Control-Allow-Origin на исходном сервере. Чтобы решить эту проблему, в некоторых случаях можно использовать прокси-сервер, извлекать содержимое страницы на другом сервере, анализировать html-код, избавляться от ссылок и возвращать результат в браузер клиента.

Ответ 9

В качестве альтернативы предотвращению по умолчанию вы можете изменить привязки на промежутки, чтобы было видно, что ссылка больше не является ссылкой.

$('#templateframe').contents().find('a').each(function() {
    $(this).replaceWith($('<span>' + this.innerHTML + '</span>'));
});