window.parent trong JavaScript

window.parent là một thuộc tính sử dụng rất nhiều trong lập trình app web

1. window.parent trong javascript là gì ?

window.parent là một thuộc tính của đối tượng window của javascript, được sử dụng trong các website hay ứng dụng web khi bạn làm việc với iframe.

Nhờ có window.parent mà có thể xử lý được các thẻ bên trang chính còn gọi là trang cha (parent)

2. Mô tả chi tiết về window.parent

    Chức năng chính của window.parent

        window.parent trả về 1 đối tượng tham chiếu đến cửa sổ cha(window parent) của một cửa sổ hoặc iframe hiện tại.
        Nếu tài liệu hiện tại không được nhúng trong iframe hoặc frame, window.parent sẽ trả về chính nó (window hiện tại).

    Ứng dụng thực tế của window.parent

        Khi bạn có một trang web với cấu trúc gồm các iframe, bạn có thể sử dụng window.parent để truy cập các phương thức hoặc thuộc tính của cửa sổ cha từ bên trong iframe.

    Ví dụ cơ bản:

        HTML:

<iframe src="child.html" width="600" height="400"></iframe>

child.html (nội dung trong iframe):

    <script>
      // Truy cập DOM của trang cha
      console.log(window.parent.document.title);
    </script>

Ở đây, đoạn mã trong child.html truy cập và in ra tiêu đề của tài liệu chứa iframe.

Cách sử dụng:

    Giao tiếp giữa iframe và cửa sổ cha:

// Từ iframe gửi thông điệp đến cha
window.parent.postMessage("Hello from iframe", "*");

    Cửa sổ cha nhận thông điệp từ iframe:

            window.addEventListener("message", function(event) {
              console.log("Received message:", event.data);
            });

3. Một số hạn chế bảo mật khi dùng window.parent

        Nếu iframe và cửa sổ cha thuộc các miền khác nhau (cross-origin), việc truy cập các thuộc tính hoặc phương thức có thể bị chặn bởi chính sách bảo mật trình duyệt (Same-Origin Policy).
        Trong trường hợp này, bạn sẽ chỉ có thể giao tiếp thông qua phương thức postMessage.


    window.parent: Truy cập đến cửa sổ cha của một iframe.
    Ứng dụng: Giao tiếp giữa iframe và trang cha, thao tác trên DOM của trang cha.
    Lưu ý bảo mật: Same-Origin Policy có thể giới hạn quyền truy cập nếu iframe và trang cha không cùng nguồn gốc.

Bài viết liên quan:

window.parent là một thuộc tính sử dụng rất nhiều trong lập trình app web