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.
- window
- object
- number
- string
Các bài viết liên quan
Tài sản phương pháp trong lớp Number
Cùng nhau tìm hiểu các tài sản và phương pháp trong lớp NumberJavascriptBiên giới trong biểu thức chính quy regular
Biên giới \b cũng rất quan trọng. Các bạn học Regexp thì cũng bắt buộc phải biếtRegularCác kiểu dữ liệu trong javascript
Trong tất cả ngôn ngữ lập trình đều có các kiểu dữ liệu. Và trong javascript cũng vậyJavascript