\n\n\n\n\n```\n\nĐường dẫn `./index.html`\n\n```html\n\n\n\n\n \n\n\n\n

Post Message

\n\n \n \n\n\n\n```\n\nĐường dẫn `./index.js`\n\n```js\nlet button = document.querySelector(\"button\");\n\nbutton.onclick = function () {\n let newWindow = window.open(\"./demo.html\", undefined, \"popup\"); \n\n newWindow.onload = function () { // sự kiện onload\n newWindow.postMessage(\"Xin chao ban\", \"*\"); // Gửi tin nhắn đến trang demo.html\n };\n};\n```\n\nKiểu như vậy. Đó là mình gửi bằng sự kiện `onload`. Đơn nhiên là còn nhiều điều khác.\n\nCác bạn có thể xem thêm về nó tại đây [postMessage](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage)\n\n### Tổng kết\n\nTrong bài viết này mình đã nói về `postMessage`. Tuy khó hiểu nhưng các bạn nên tìm hiểu về nó nhé. Biết đâu sau này có ích","description":"Phương pháp `postMessage` dùng để gửi tin nhắn giữa các cửa sổ với nhau.","url":"https://offjs.com/posts/post-message-trong-doi-tuong-window","author":"js_master"} ]

🐞 postMessage 🐞

postMessage trong đối tượng window

Phương pháp postMessage dùng để gửi tin nhắn giữa các cửa sổ với nhau.
js_masterwindow
windown.jpg

Chào các bạn

Trong bài viết này mình sẽ nói về phương pháp postMessage trong đối tượng window

postMessage

Phương pháp postMessage dùng để trao đổi tin nhắn với các cửa sổ với nhau. Ví dụ như iframe hoặc window.open(...).

Nó rất tiện tùy trường hợp bạn áp dụng. Chúng ta nên biết về nó để sau này còn giúp chúng ta điều gì đó.

Cú Pháp

Gửi tin nhắn đi

1window.postMessage(message, targetOrigin, transfer)
  1. message
    • Tin nhắn bạn cần gửi. Bao gồm các kiểu dử liệu sau Structured
  2. targetOrigin
    • URL nguồn gốc bạn cần gửi tin nhắn đến. Có thể là dấu sao * nếu bao gồm bất kỳ nguồn gốc nào.
  3. transfer

Nhận tin nhắn bằng sự kiện sau

1window.addEventListener("message", (e) => {
2    console.log(e.data);
3})

Lý thuyết là vậy. Nhưng để hiểu được nó cũng như cách dùng thì chúng ta phải đi vào ví dụ.

Đường dẫn ./demo.html

1<!doctype html>
2<html>
3
4<head>
5    <meta charset="UTF-8">
6</head>
7
8<body>
9
10    <h1>demo.html</h1>
11    <script>
12        window.addEventListener('message', function (event) {
13            console.log("demo: ", event.data); // Xin chao ban
14        });
15    </script>
16
17</body>
18
19</html>

Đường dẫn ./index.html

1<!doctype html>
2<html>
3
4<head>
5    <meta charset="UTF-8">
6</head>
7
8<body>
9    <h1>Post Message</h1>
10
11    <button>Click Me</button>
12    <script src="./index.js"></script>
13</body>
14
15</html>

Đường dẫn ./index.js

1let button = document.querySelector("button");
2
3button.onclick = function () {
4    let newWindow = window.open("./demo.html", undefined, "popup"); 
5
6    newWindow.onload = function () { // sự kiện onload
7        newWindow.postMessage("Xin chao ban", "*"); // Gửi tin nhắn đến trang demo.html
8    };
9};

Kiểu như vậy. Đó là mình gửi bằng sự kiện onload. Đơn nhiên là còn nhiều điều khác.

Các bạn có thể xem thêm về nó tại đây postMessage

Tổng kết

Trong bài viết này mình đã nói về postMessage. Tuy khó hiểu nhưng các bạn nên tìm hiểu về nó nhé. Biết đâu sau này có ích

  • object
  • string
  • number
  • regular

OFFJS.COM - Blog học tập giải trí - 🐲

Chia sẻ nhiều kiến thức thú vị trong lập trình cũng như cuộc sống.

Giới thiệu


Trang web này mình sẽ nói về kiến thức lập trình và cuộc sống mà các bạn mới học hay đang dự định học. Có một bước đi đầu đời vững chắc.

Hồ Quang Trí.jpg

Đi kèm với đó là những lý thuyết và các dòng code minh họa. Để các bạn dễ hình dung.

Đơn nhiên cũng không dễ dàng ngày một ngày hai mà học hết được.

Học Tập Là Một Con Đường Dài Vô Tận

Nó sẽ nuốt các bạn vô số thời gian nhưng bù lại khi đã biết thì mọi thứ thật là tuyệt.

1console.log("Hồ Quang Trí");

Nếu có ai nói bạn học lập trình trong vòng 3 đến 6 tháng thì mình xin nói thật không bao giờ có chuyện đó nhé.

Chúc các bạn thành công.

Chân trang

phone-toan-phat.png

0353210168

address-toan-phat.png

Việt Nam