Truy cập vào iframe trong window

Chào các bạn

Trong bài viết này mình sẽ hướng dẫn các bạn truy cập tag iframe bằng javascript

Iframe

Thẻ iframe dùng dể nhúng một trang web hoặc tài liệu hoặc một cái gì đó vào trang web của chúng ta.

Chúng là một đối tượng cửa sổ riêng biệt. Khác với trang web của chúng ta.

Nếu có nhiều iframe trong trang web chúng ta thì chúng có từng đó đối tượng riêng biệt.

Chúng ta có thể truy cập iframe bằng cách

Ví dụ :

1let iframe = document.createElement('iframe');
2
3iframe.src = "/";
4
5document.body.prepend(iframe); // Thêm nó vào body
6
7iframe.onload = function(e) {
8    let windowIframe = this.contentDocument; // Lấy ra tài liệu
9    windowIframe.body.innerHTML = "Thay the noi dung"
10}

Như ví dụ trên mình lấy ra document của iframe và thay thế nội dung của nó. Nếu muốn là được như vậy thì bắt buộc phải có cùng nguồn gốc. Nếu bạn chưa biết nguồn gốc là như thế nào thì xem thêm tại đây cors origin

Chúng ta có thể lấy ra nhiều thẻ iframe bằng cách.

window.frames

Tài sản frames trong đối tượng window trả về một danh sách các phần tử iframe

1let iframe = document.createElement('iframe');
2
3iframe.src = "/";
4
5document.body.prepend(iframe); // Thêm nó vào body
6
7let frames = window.frames;
8
9console.log(frames.length); // 1

Như ví dụ trên vì mình chỉ thêm 1 iframe vào body nên chỉ có một. Nếu nhiều thì có nhiều.

Chúng ta có thể truy cập nó theo tên hoặc theo chỉ mục index

• name Truy cập theo tên

1let iframe = document.createElement('iframe');
2
3iframe.src = "/";
4iframe.name = "iframe_1"; // Đặt tên cho iframe
5document.body.prepend(iframe); // Thêm nó vào body
6
7let frames = window.frames;
8
9console.log(frames.iframe_1); // Log iframe theo tên

• index Truy cập theo chỉ mục

1let iframe = document.createElement('iframe');
2
3iframe.src = "/";
4document.body.prepend(iframe); // Thêm nó vào body
5
6let frames = window.frames;
7
8console.log(frames[0]); // Log iframe theo chỉ mục

Ngoài ra còn nhiều thứ khác liên quan đến iframe. Các bạn có thể tìm hiểu thêm về nó tại đây iframe

Tổng kết

Chúng ta nên biết càng nhiều càng tốt. Để sau này còn tìm kiếm. Có rất nhiều thứ sẽ đơn giản nếu chúng ta biết.