🙉 Iframe 🙉

Truy cập vào iframe trong window

Để truy cập vào iframe chúng ta có rất nhiều cách. Các bạn cùng xem bài viết nhé.
js_masterwindow
windown.jpg

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

Tài sảnMô tả
contentWindowDùng để truy cập đối tượng window trong iframe
contentDocumentDùng để truy cập vào document trong iframe

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.

  • window
  • object
  • number
  • string

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