liên lạc giữa tab trình duyệt

Question

Tôi có một trang html (main.html) mở một tab mới trong cùng một tên miền bằng cách sử dụng javascript với phương thức window.open ("newtab.html").

Trong tab mới, người dùng làm điều gì đó kết thúc hoạt động của mình bằng cách nhấp vào nút. Tại thời điểm này, tôi muốn gửi một tin nhắn đến cửa sổ mở. Tôi đã thử với postMessage nhưng từ tab mới, tôi không thể tham chiếu đến trình mở.

Từ tab mới tôi muốn một cái gì đó giống như nhưng tôi đã "ko"

var w = window.opener; 
if (w) { 
    w.postMessage("hi", "http://10.150.10.43"); 
} else { 
    alert("ko"); 
} 

gì là cách tốt nhất để gửi tin nhắn từ tab/cửa sổ thứ yếu so với một trong những chính (trong cùng một tên miền)?

cảm ơn bạn rất nhiều Luca

Answer 1

Điều đó thật lạ. Việc mở một cửa sổ mới với window.open("newtab.html") sẽ cung cấp cho cửa sổ mới mở khả năng tham chiếu trình mở qua window.opener.

Dù sao, có một số tùy chọn khác để liên lạc giữa hai cửa sổ trên cùng một tên miền. Tôi nghĩ rằng hai Sau đây là các dễ nhất để thực hiện:

1. Sử dụng localStorage. Nếu bạn lưu trữ một số dữ liệu dưới một số khóa vào localStorage trong cửa sổ tab mới, thì cửa sổ mở sẽ nhận được một sự kiện lưu trữ. Nếu bạn nắm bắt sự kiện với một trình xử lý, bạn có thể đọc dữ liệu từ localStorage mà bạn đã viết từ cửa sổ tab mới. Lưu ý rằng các sự kiện chỉ được kích hoạt nếu cả hai trang nằm trên cùng một tên miền và nếu thực sự có hai cửa sổ được đề cập (các sự kiện không được kích hoạt trong cùng một cửa sổ đã ghi dữ liệu). Để biết thêm thông tin về cách thực hiện việc này - hãy xem ví dụ: http://diveintohtml5.info/storage.html

2. Sử dụng công nhân Web được chia sẻ. Công nhân web là một tập lệnh JS được thực thi trong nền trên một chuỗi riêng biệt. Chia sẻ công nhân web là một loại đặc biệt của công nhân Web cho phép bất kỳ số lượng các tài liệu phụ huynh để giao tiếp với một công nhân duy nhất. Vì vậy, bạn có thể sử dụng công nhân để chuyển tiếp thông báo giữa cửa sổ mở và cửa sổ tab mới. API để giao tiếp với một người lao động rất giống với API postMessage. Để biết thêm thông tin về cách thực hiện việc này - hãy xem ví dụ: http://www.sitepoint.com/javascript-shared-web-workers-html5/.