\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"},{"@context":"https://schema.org","@type":"NewsArticle","headline":"Phương pháp open trong đối tượng window","articleBody":"## Chào các bạn\n\nTrong bài viết này chúng ta cùng làm việc với phương pháp `open` trong đối tượng `window`\n\n### Open\n\nPhương pháp `open` dùng để mở cửa sổ mới trong trình duyệt.\n\nĐể mở một cửa sổ chúng ta dùng như sau\n\n```js\nwindow.open(\"https://offjs.com\")\n```\n\nNhưng khi chúng ta làm như vậy thì trình duyệt sẻ chặn lại. Để nó có thể hoạt động được. Các bạn phải thêm nó vào đâu đó để người dùng xác định nhé.\n\nVí dụ như là nút `button` chẵng hạn\n\n```js\nlet button = document.createElement('button'); // Tạo mới thẻ button\n\nbutton.innerHTML = \"Click Me Open New Tab\" // Nội dung văn bản button\n\nbutton.onclick = function () { // Thêm chức năng xử lý cho button\n window.open(\"https://offjs.com\"); // Mở trang web trong cửa sổ mới\n}\n\ndocument.body.append(button); // Thêm button vào cuối body\n```\n\nỞ ví dụ trên mình tạo và làm các thứ cho `button` bằng `javascript`. Đơn nhiên là còn nhiều cách khác nữa. Nhưng mà mình lười viết.\n\nCú pháp của chức năng `open`\n\n```js\nwindow.open(url, target, features)\n```\n\n1. `url`\n - Chuỗi `URL` đường dẫn để mở cửa sổ\n2. `target`\n - Tên chúng ta đặt cho cửa sổ\n3. `features`\n - Chuỗi cấu hình tùy chọn cho cửa sổ\n - `left` Vị trí bên trái cửa sổ\n - `Top` Vị trí trên cùng cửa sổ\n - `width` Chiều rộng cửa sổ\n - `height` Chiều cao sửa sổ\n - `menubar`\n - `yes` Có menubar trên cửa sổ\n - `no` Không có menubar trên cửa sổ\n - `toolbar`\n - `yes` Có hiển thị thanh điều hướng\n - `no` Không có hiển thị thanh điều hướng\n - `location`\n - `yes` Có hiển thị `URL` trong cửa sổ mới\n - `no` Không hiển thị `URL` trong cửa sổ mới\n - `status`\n - `yes` Có hiển thị thanh trạng thái\n - `no` Không hiển thị thanh trạng thái\n - `resizable`\n - `yes` Cho phép resizable cửa sổ\n - `no` Không cho phép\n - `scrollbars`\n - `yes` Cho phép vô hiệu hóa thanh cuộn cửa sổ\n - `no` Không cho phép vô hiệu hóa thanh cuộn\n - Ngoài ra còn có các tùy chọn khác. Các bạn xem thêm về nó tại đây [windowFeatures](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#window_features)\n\nVí dụ:\n\n```js\nlet button = document.createElement('button');\nbutton.innerHTML = \"Click Me Open New Windown\"\n\nbutton.onclick = function () {\n window.open('https://offjs.com', \"newWindown\", \"left=100,top=100,height=100,width=100,menubar=no,location=no,status=no,resizable=no,scrollbar=no,popup=no\");\n}\n\ndocument.body.append(button);\n```\n\n**Lưu ý**: Nếu chúng ta chạy ví dụ trên mà tham số chạy không đúng như dư định thì do trình duyệt không áp dụng nhé.\n\n### Truy cập vào cửa sổ mới\n\nCuộc gọi `window.open(...)` sẻ trả về một tham chiếu đến cửa sổ mới có. Các bạn có thể truy cập nó bằng cách\n\n```js\nlet button = document.createElement('button');\nbutton.innerHTML = \"Click Me Open New Windown\"\n\nbutton.onclick = function (e) {\n let newWindown = window.open('https://offjs.com', \"newWindown\", \"popup\");\n\n newWindown.onload = function () {\n newWindown.document.body.style.backgroundColor = 'red'\n }\n}\n\ndocument.body.append(button);\n```\n\n**Lưu Ý**: Phải có cùng [nguồn gốc](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) thì mới thay đổi được `backgroundColor` như ví dụ trên nhé các bạn.\n\n### Đóng cửa sổ mới\n\nĐể đóng cửa sổ các bạn dùng phương pháp `close`\n\n```js\nlet button = document.createElement('button');\nbutton.innerHTML = \"Click Me Open New Windown\"\n\nbutton.onclick = function (e) {\n let newWindown = window.open('https://offjs.com', \"newWindown\", \"popup\");\n\n setTimeout(() => {\n newWindown.close();\n alert(newWindown.closed);\n }, 3000);\n}\n\ndocument.body.append(button);\n```\n\nỞ ví dụ trên mình đóng cửa sổ mới sau 3 giây. Nếu cửa sổ được đóng thì tài sản `closed` trả về `true`\n\nVà đơn nhiên còn nhiều thứ khác nữa. Các bạn muốn tìm hiểu về chi tiết thì xem thêm về nó tại đây [`open`](https://developer.mozilla.org/en-US/docs/Web/API/Window/open)\n\n\n### Tổng kết\n\nTrong bài viết này mình đã nói về phương pháp `open` trong đối tượng `window`.\n\nĐơn nhiên là còn rất rất là nhiều phương pháp và tài sản khác nữa. Cần rất rất là nhiều thời gian để mà tìm hiểu. Có thể nói đến hàng năm. Chứ không thể nói từng ngày được. \n\nOK. \n","description":"Phương pháp `open` dùng để mở một cửa sổ mới. Hiểu về nó sẻ giúp chúng ta rất nhiều thứ.","url":"https://offjs.com/posts/phuong-phap-open-trong-doi-tuong-window","author":"js_master"} ]

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