Javascript gửi dữ liệu đến trang html

Trong cửa sổ bật lên này, người dùng có thể chọn ba tùy chọn và gửi tùy chọn đã chọn trở lại điểm gốc

Bạn có thể xem bản demo của điều này trong video dưới đây

Thiết lập cấu trúc permalink

Tôi quyết định tạo một thiết lập rất đơn giản cho dự án này. Bắt đầu bằng cách tạo một thư mục mới và bên trong tạo tệp

DOCTYPE html>

  
    
    Sending messages
  
  
    I'm the sub page
    
    Choose your response
    That's amazing
    Pretty cool
    
      Meh, could be cooler
    
    
  

7,

DOCTYPE html>

  
    
    Sending messages
  
  
    I'm the sub page
    
    Choose your response
    That's amazing
    Pretty cool
    
      Meh, could be cooler
    
    
  

8 và

DOCTYPE html>

  
    
    Sending messages
  
  
    I'm the sub page
    
    Choose your response
    That's amazing
    Pretty cool
    
      Meh, could be cooler
    
    
  

9

Hãy bắt đầu bằng cách tạo nội dung

DOCTYPE html>

  
    
    Sending messages
  
  
    I'm the sub page
    
    Choose your response
    That's amazing
    Pretty cool
    
      Meh, could be cooler
    
    
  

7

DOCTYPE html>

  
    
    Sending messages
  
  
    Welcome. You can click the button below to open a new tab
    Open new tab
    Send message
    
    
  

Hãy chuyển sang trang

DOCTYPE html>

  
    
    Sending messages
  
  
    I'm the sub page
    
    Choose your response
    That's amazing
    Pretty cool
    
      Meh, could be cooler
    
    
  

8, trang này sẽ rất giống với chỉ mục

DOCTYPE html>

  
    
    Sending messages
  
  
    I'm the sub page
    
    Choose your response
    That's amazing
    Pretty cool
    
      Meh, could be cooler
    
    
  

Gửi tin nhắn giữa các cửa sổ bằng JavaScript permalink

Đối với bài viết cụ thể này, tôi đã quyết định sử dụng một tệp JavaScript chung. Tuy nhiên, bạn cũng có thể chia nó thành hai tệp

Hãy mở tệp

DOCTYPE html>

  
    
    Sending messages
  
  
    I'm the sub page
    
    Choose your response
    That's amazing
    Pretty cool
    
      Meh, could be cooler
    
    
  

9. Điều đầu tiên chúng tôi muốn thêm là việc mở cửa sổ thực sự

let newWindow;

const openNewWindow = [] => {
  const params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,width=300,height=300`;
  newWindow = window.open['sub.html', 'sub', params];
};

Tôi truyền một số tham số cho hàm

DOCTYPE html>

  
    
    Sending messages
  
  
    I'm the sub page
    
    Choose your response
    That's amazing
    Pretty cool
    
      Meh, could be cooler
    
    
  

3

• DOCTYPE html>
  
    
      
      Sending messages
    
    
      I'm the sub page
      
      Choose your response
      That's amazing
      Pretty cool
      
        Meh, could be cooler
      
      
    
  

  8. Trang chúng tôi muốn mở

• DOCTYPE html>
  
    
      
      Sending messages
    
    
      I'm the sub page
      
      Choose your response
      That's amazing
      Pretty cool
      
        Meh, could be cooler
      
      
    
  

  5. Tên của trang chúng tôi muốn mở [có thể là bất cứ thứ gì]

• DOCTYPE html>
  
    
      
      Sending messages
    
    
      I'm the sub page
      
      Choose your response
      That's amazing
      Pretty cool
      
        Meh, could be cooler
      
      
    
  

  6. Tùy chọn cho cửa sổ mới này

Bạn cũng có thể đã phát hiện ra tôi đặt cửa sổ mới này làm biến. Chúng tôi đã thấy điều này để gửi dữ liệu bằng nút khác

Để gửi dữ liệu đến cửa sổ bật lên mới này, chúng ta cần tạo hàm

DOCTYPE html>

  
    
    Sending messages
  
  
    I'm the sub page
    
    Choose your response
    That's amazing
    Pretty cool
    
      Meh, could be cooler
    
    
  

7

const sendMessage = [] => {
  newWindow.postMessage[{ foo: 'bar' }, '*'];
};

Thao tác này sẽ đăng một thông báo mới lên cửa sổ chứa đối tượng có giá trị

DOCTYPE html>

  
    
    Sending messages
  
  
    I'm the sub page
    
    Choose your response
    That's amazing
    Pretty cool
    
      Meh, could be cooler
    
    
  

8

Bây giờ chúng ta có thể làm việc ở đầu nhận. Vì chúng tôi đã sử dụng chức năng

DOCTYPE html>

  
    
    Sending messages
  
  
    I'm the sub page
    
    Choose your response
    That's amazing
    Pretty cool
    
      Meh, could be cooler
    
    
  

9, chúng tôi có thể đăng ký nhận tin nhắn cho cửa sổ hiện tại

Để làm điều đó, hãy tạo trình nghe sau

DOCTYPE html>

  
    
    Sending messages
  
  
    I'm the sub page
    
    Choose your response
    That's amazing
    Pretty cool
    
      Meh, could be cooler
    
    
  

0

Hàm này sẽ lắng nghe tất cả các tin nhắn và nếu một tin nhắn đi kèm với đối tượng

let newWindow;

const openNewWindow = [] => {
  const params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,width=300,height=300`;
  newWindow = window.open['sub.html', 'sub', params];
};

0, nó sẽ đặt văn bản phản hồi thành giá trị đó

Phần tiếp theo là gửi dữ liệu trở lại cửa sổ ban đầu. Chúng tôi đã tạo ba nút trong tệp

DOCTYPE html>

  
    
    Sending messages
  
  
    I'm the sub page
    
    Choose your response
    That's amazing
    Pretty cool
    
      Meh, could be cooler
    
    
  

8 để gọi hàm

let newWindow;

const openNewWindow = [] => {
  const params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,width=300,height=300`;
  newWindow = window.open['sub.html', 'sub', params];
};

2. Hãy tiếp tục và thêm chức năng đó

DOCTYPE html>

  
    
    Sending messages
  
  
    I'm the sub page
    
    Choose your response
    That's amazing
    Pretty cool
    
      Meh, could be cooler
    
    
  

3

Và một lần nữa, chúng ta có thể tận dụng hàm

DOCTYPE html>

  
    
    Sending messages
  
  
    I'm the sub page
    
    Choose your response
    That's amazing
    Pretty cool
    
      Meh, could be cooler
    
    
  

9, nhưng lần này chúng ta gọi nó trên

let newWindow;

const openNewWindow = [] => {
  const params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,width=300,height=300`;
  newWindow = window.open['sub.html', 'sub', params];
};

4, tham chiếu đến cửa sổ ban đầu

Bây giờ, hãy sửa đổi trình lắng nghe sự kiện của chúng ta để xử lý thông báo cụ thể này

DOCTYPE html>

  
    
    Sending messages
  
  
    I'm the sub page
    
    Choose your response
    That's amazing
    Pretty cool
    
      Meh, could be cooler
    
    
  

6

Và thì đấy, bây giờ bạn có thể gửi tin nhắn giữa hai cửa sổ bằng JavaScript

Nếu bạn muốn xem mã nguồn, tôi đã tải nó lên GitHub

Cảm ơn bạn đã đọc và hãy kết nối. liên kết cố định

Cảm ơn bạn đã đọc blog của tôi. Vui lòng đăng ký nhận bản tin email của tôi và kết nối trên Facebook hoặc Twitter

Làm cách nào để gửi dữ liệu từ JavaScript sang HTML?

Làm cách nào để gửi dữ liệu từ máy chủ sang HTML?