Vô hiệu hóa tất cả các liên kết bên trong IFRAME bằng cách sử dụng jQuery

Question

Tôi muốn tắt tất cả các liên kết bên trong IFRAME, khi mọi người nhấp vào liên kết đó, cảnh báo sẽ bật lên.

Đây là những gì tôi có cho đến nay, nhưng jQuery không làm gì cả. Không chắc tôi đã làm gì sai.

<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(); 

     }); 
}); 

Xin cảm ơn trước.

Answer 1

Hoặc bạn có thể đặt tập lệnh bên trong iframe và do đó rút ngắn mã theo cách này. Nó làm cho nó một hiệu suất nhẹ hơn tôi tin.

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

Answer 2

Tôi hy vọng rằng $(document).ready sẽ thực hiện trước khi nội dung của khung nội tuyến được tải. Hãy thử sử dụng thuộc tính onload cho iframe thay thế.

Answer 3

Đây là giải pháp chung cho vấn đề của bạn. Hy vọng điều này sẽ làm việc tốt.

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

Answer 4

Thay thế ngăn chặn mặc định, bạn có thể thay đổi liên kết để hiển thị liên kết không còn liên kết nữa.

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

Answer 5

Không có câu trả lời nào ở trên sẽ hoạt động trừ khi có thể bạn đang tải nội dung cục bộ bởi vì thời gian sự kiện window.load kích hoạt khung nội tuyến chưa được tải. Bạn có thể thêm người nghe vào khung nội tuyến để tìm tất cả các bên trong iframe và tắt chúng.

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

Answer 6

Một huyền thoại qua tại

http://www.webdeveloper.com/forum/showthread.php?182260-Can-we-disable-links-inside-iframes

hồi sinh một kỹ thuật từ những ngày cũ tốt, trở lại khi chúng tôi không có cuộc gọi như -webkit-gradient() và nam giới là nam giới.

Chỉ cần đặt div trong suốt lên trên!

Answer 7

Giải pháp được đề cập bởi "lol" thực sự hoạt động khá tốt. Tôi tình cờ vô tình sau khi làm việc này trong một vài giờ ...

Đặt khung nội tuyến của bạn bên trong phần tử div, sau đó làm cho div trong suốt và đẩy chỉ mục z của khung nội tuyến phía sau div. Xem ví dụ sau:

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

Sau đó thiết lập css của bạn như thế này:

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

tải lên trang web của bạn và các div là những gì sẽ chấp nhận những sự kiện nhấp chuột, không phải là iframe.

Answer 8

Tôi cũng đang tìm cách vô hiệu hóa các liên kết iframe và không thể tìm thấy giải pháp. Nhờ HTML5, bạn có thể dễ dàng vô hiệu hóa các liên kết bằng cách thêm thuộc tính sandbox.

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

view demo

Tôi hy vọng điều này sẽ giúp người tìm kiếm trên mạng, đặc biệt là kể từ khi câu hỏi này bật lên đầu tiên trên Google.

Answer 9

Tôi nghĩ rằng không có giải pháp được đề xuất nào (ngoài hộp cát html5) sẽ hoạt động nếu bạn chưa đặt Access-Control-Allow-Origin trên máy chủ nguồn. Để giải quyết vấn đề này, trong một số trường hợp, người dùng có thể sử dụng máy chủ proxy, truy xuất nội dung của trang trên máy chủ khác, phân tích mã html, loại bỏ các liên kết và trả lại kết quả cho trình duyệt của khách hàng.