Tiện ích trò chuyện với react.js

Question

Tôi đang viết một tiện ích trò chuyện, tiện ích này sẽ được phân phối tới người dùng cuối có ít mã để đưa vào trang web của họ. Thường lệ.

Tiện ích con của tôi sẽ được viết bằng Phản hồi. Tôi biết một số cách để đạt được điều này. Hãy để tôi liệt kê những cách mà tôi có thể nghĩ đến.

• Cung cấp đoạn mã với iframe trực tiếp và url nguồn trong đó. Vấn đề với cách tiếp cận này là, nó có thể được sử dụng chỉ khi widget được nhúng. Nếu tiện ích cần bật lên, tính linh hoạt sẽ bị mất.
• Cung cấp đoạn mã với javascript đang được tải không đồng bộ. Javascript sẽ tạo một khung nội tuyến trong trang web mẹ và src có thể được đặt. Widget javascript này có thể có ít thông minh. Đây là cách tiếp cận thông thường, theo sau là hầu hết các nhà phát triển widget.

Tất nhiên, URL nguồn sẽ hiển thị trang Phản hồi được đóng gói bởi webpack, trong cả hai trường hợp.

Tôi muốn biết các phương pháp hay nhất về phát triển tiện ích con. Vì vậy, tôi đã trải qua những triển khai phổ biến của nó. Tôi thích widget của Intercom rất nhiều. Nó được viết bằng React. Tôi phân tích cách nó hoạt động. Tối thiểu javascript được tải không đồng bộ trên trang web. Nó đang tiêm một số iframe với id intercom-frame. Điều đó iframe có một kịch bản trong đầu của nó với một nguồn URl. Rõ ràng đó là gói React.

Điều tôi không hiểu là, bên dưới iframe, một div này được tạo với ba iframes trong đó. Một để hiển thị bong bóng trò chuyện, một biểu tượng khác để hiển thị biểu tượng bong bóng trò chuyện, biểu tượng cuối cùng hiển thị cửa sổ trò chuyện thực. Những iframe không có url nguồn và tôi đoán gói được phân phát từ khung nội tuyến đầu tiên được tạo bởi javascript tiện ích con.

Tôi đã xem qua số SO question này, phần nào trả lời câu hỏi của tôi. Từ câu trả lời,

hiển thị một số API giữa trang web khách hàng và iframe của bạn, sử dụng nhắn tin cửa sổ.

mã chính (mã iframe) sau đó được tải bởi tập lệnh đầu tiên này không đồng bộ và không được bao gồm trong đó.

Những gì tôi không hiểu là,

1.) Làm thế nào họ có thể đã đạt được nó với thông điệp cửa sổ?

2.) Cách họ đã quản lý để tạo ra một div với iframe trong đó, từ một tập lệnh iframe s khác ?. Widget javascript không tạo các phần tử đó, dựa trên nguồn của nó. Nó phải được thực hiện bởi gói React trong iframe được tạo bởi js widget.

3.) Cách gói phản ứng bên trong iframe có thể tạo các yếu tố phản ứng trong DOM mẹ?

Answer 1

Không ai trong số iframe được tạo bởi tập lệnh của Intercom có ​​thuộc tính src, điều đó có nghĩa là chúng không tuân theo cùng chính sách gốc. Do đó, họ có thể sửa đổi trang mẹ html và ngược lại.

Tuy nhiên, tôi không hiểu tại sao họ cần phải có riêng biệt iframe. Và tại sao sử dụng một tập lệnh để chèn một tập lệnh khác để chèn nội dung html chính. Không phải tập lệnh đầu tiên có đủ khả năng để chèn nội dung html không? Tôi rất muốn được làm sáng tỏ những điều này.