chụp nhấp vào div xung quanh khung nội tuyến

Question

Làm cách nào tôi có thể nắm bắt một nhấp chuột hoặc sự kiện được tổ chức trên div xung quanh khung nội tuyến. Tôi đã thử gắn funciton để nhấp vào sự kiện trên div nhưng kể từ khi iframe không bao giờ bong bóng sự kiện lên đến div xung quanh chức năng không bao giờ được gọi. Có cách nào tôi có thể nắm bắt sự kiện trên div và sau đó tuyên truyền nó vào khung nội tuyến cho hành động mặc định

Answer 1

Nếu nhấp chuột nằm trong khu vực khung nội tuyến, ngữ cảnh iframe xử lý sự kiện nhấp chuột, nó không phát sinh lên đến iframe cha mẹ. Vì vậy, div sẽ không bao giờ đăng ký sự kiện nhấp chuột ở tất cả nếu nó xảy ra trong khu vực khung nội tuyến.

Hơn nữa, nếu iframe chứa trang không thuộc cùng một miền với cha mẹ iframe, bất kỳ tương tác nào đều bị cấm (lại. same origin policy).

Khi same origin policy được đáp ứng, có một vài điều bạn có thể làm, bạn có thể gọi một phương thức trong bối cảnh iframe mẹ:

top.parentFunction(); 

Vì vậy, trong iframe bạn nghe thêm một sự kiện mà các đại biểu đến iframe parent (có thể truy cập được với tài liệu tham khảo top.

Sự kiện truyền bá phức tạp hơn rất nhiều, vì vậy tôi chỉ đơn giản là tham khảo Diego Perini's NWEvents library.Tôi tin rằng hệ thống sự kiện của anh ấy là một trong những điều tốt nhất và đặc biệt là tương tác iframe.

Tôi chắc chắn sẽ không bắt đầu viết mã của riêng bạn để đạt được điều này, điều này có thể dễ dàng là một dự án dài một năm nếu bạn muốn làm điều đó đúng và thậm chí sau đó sẽ kém hơn công việc của Diego.

Answer 2

Không có cách nào "tốt" để làm điều đó, nhưng nếu bạn thực sự cần phát hiện nhấp chuột vào Iframe, bạn có thể thực hiện điều đó trong các trình duyệt mới nhất.

<iframe src="http://mtw-ed.com/" id="iframe" style=""></iframe> 

<script type="text/javascript"> 
var inIframe = false; 
function checkClick() { 
    if (document.activeElement 
     && document.activeElement === document.getElementById("iframe")) { 
     if (inIframe == false) { 
      alert("iframe click"); 
      inIframe = true; 
     } 
    } else 
     inIframe = false; 
} 
setInterval(checkClick, 200); 
</script> 

Tập lệnh này sẽ kiểm tra mỗi 200ms xem người dùng có trong Iframe không. Tất nhiên, họ có thể chưa nhấp vào Iframe để đến đó, nhưng tôi e rằng đây là điều tốt nhất bạn có thể làm mà không có giải pháp @ BGerrissen.

Nó sẽ phát hiện 'lần nhấp' đầu tiên, trừ khi bạn nhấp lại. Nó chỉ hoạt động trong các trình duyệt thực sự hiện đại.

Answer 3

Bạn có thể sử dụng thư viện như porthole để chuyển thư giữa cha mẹ và iframe, ngay cả trên các tên miền. Sử dụng điều này sẽ không chính xác tuyên truyền sự kiện (bạn sẽ không thể nhận được đối tượng sự kiện), nhưng bạn có thể tạo sự kiện của riêng mình dưới dạng một thông điệp đơn giản, và sau đó xử lý nó trong phụ huynh dưới dạng nhấp chuột.

Here's their example

Tuy nhiên, tôi đã sử dụng câu trả lời Brendon như đó là công trình đơn giản hơn cho nhu cầu hiện tại của tôi.