Cách thêm sự kiện nhấp vào iframe với JQuery

Question

Tôi có iframe trên trang, đến từ bên thứ ba (quảng cáo). Tôi muốn kích hoạt sự kiện nhấp chuột khi khung nội tuyến đó được nhấp vào (để ghi lại một số chỉ số nội bộ). Một cái gì đó như:

$('#iframe_id').click(function() { 
    //run function that records clicks 
}); 

..based vào HTML của:

<iframe id="iframe_id" src="http://something.com"></iframe> 

tôi dường như không thể nhận được bất kỳ sự thay đổi điều này để làm việc. Suy nghĩ?

Answer 1

Không có 'onclick' sự kiện cho một khung nội tuyến, nhưng bạn có thể thử để bắt sự kiện click của các tài liệu trong iframe:

document.getElementById("iframe_id").contentWindow.document.body.onclick = 
function() { 
    alert("iframe clicked"); 
} 

EDIT Mặc dù điều này không giải quyết chéo của bạn vấn đề trang web, FYI jQuery đã được cập nhật để chơi với các iframe:

$('#iframe_id').on('click', function(event) { }); 

cập nhật 1/2015 T anh ta liên kết với giải thích khung nội tuyến đã bị xóa vì nó không còn khả dụng nữa.

Lưu ý Mã ở trên sẽ không hoạt động nếu iframe từ miền khác với trang chủ. Bạn vẫn có thể thử sử dụng hacks được đề cập trong phần bình luận.

Answer 2

Hãy thử sử dụng này: iframeTracker jQuery Plugin, như thế:

jQuery(document).ready(function($){ 
    $('.iframe_wrap iframe').iframeTracker({ 
     blurCallback: function(){ 
      // Do something when iframe is clicked (like firing an XHR request) 
     } 
    }); 
}); 

Answer 3

Không ai trong số các câu trả lời gợi ý làm việc cho tôi. Tôi giải quyết một trường hợp tương tự theo cách sau:

<a href="http://my-target-url.com" id="iframe-wrapper"></a> 
<iframe id="iframe_id" src="http://something.com" allowtrancparency="yes" frameborder="o"></iframe> 

Các css (định vị dĩ nhiên chính xác nên thay đổi theo yêu cầu ứng dụng):

#iframe-wrapper, iframe#iframe_id { 
    width: 162px; 
    border: none; 
    height: 21px; 
    position: absolute; 
    top: 3px; 
    left: 398px; 
} 
#alerts-wrapper { 
    z-index: 1000; 
} 

Tất nhiên bây giờ bạn có thể bắt bất kỳ sự kiện trên trình bao bọc khung nội tuyến.

Answer 4

Tôi đã cố gắng tìm một câu trả lời tốt hơn độc lập hơn, vì vậy tôi bắt đầu nghĩ về cách JQuery thực hiện các sự kiện và sự kiện tùy chỉnh. Vì nhấp chuột (từ JQuery) chỉ là bất kỳ sự kiện nào, tôi nghĩ rằng tất cả những gì tôi phải làm là kích hoạt sự kiện cho rằng nội dung của khung nội tuyến đã được nhấp vào. Như vậy, đây là giải pháp của tôi

$(document).ready(function() { 
    $("iframe").each(function() { 
     //Using closures to capture each one 
     var iframe = $(this); 
     iframe.on("load", function() { //Make sure it is fully loaded 
      iframe.contents().click(function (event) { 
       iframe.trigger("click"); 
      }); 
     }); 

     iframe.click(function() { 
      //Handle what you need it to do 
     }); 
    }); 
}); 

Answer 5

Đây có thể là thú vị cho ppl sử dụng Primefaces (trong đó sử dụng CLEditor):

document.getElementById('form:somecontainer:editor') 
.getElementsByTagName('iframe')[0].contentWindow 
.document.onclick = function(){//do something} 

tôi về cơ bản chỉ mất câu trả lời từ Du lịch Tech Guy và thay đổi lựa chọn một chút ..;)

Answer 6

Bạn có thể sử dụng mã này để liên kết nhấp vào phần tử nằm trong khung nội tuyến.

jQuery('.class_in_iframe',jQuery('[id="id_of_iframe"]')[0].contentWindow.document.body).on('click',function(){ \t 
 
\t console.log("triggered !!") 
 
});

Answer 7

Xem này:

var iframe = $('#your_iframe').contents(); 

iframe.find('your_clicable_item').click(function(event){ 
    console.log('work fine'); 
}); 

Answer 8

Giải pháp mà làm việc cho tôi:

var editorInstance = CKEDITOR.instances[this.editorId]; 

      editorInstance.on('focus', function(e) { 

       console.log("tadaaa"); 

      });