Blog này sẽ giải thích cách thay đổi nguồn iframe trong JavaScript.
Khung nội tuyến là gì?
Một ' khung nội tuyến ” được sử dụng để chứa một tài liệu được chỉ định khác trong tài liệu hiện tại. Điều này dẫn đến việc chuyển đổi các trang web dựa trên các liên kết đã nêu.
Làm cách nào để thay đổi nguồn khung nội tuyến trong JavaScript?
Có thể thay đổi nguồn khung nội tuyến trong JavaScript bằng cách sử dụng các phương pháp sau cùng với “ getElementById() ' phương pháp:
- “ Thông số đã qua ' Kĩ thuật.
- “ mục lục được chọn ' Tài sản.
Cách tiếp cận 1: Thay đổi nguồn khung nội tuyến trong JavaScript bằng kỹ thuật tham số đã truyền
Kỹ thuật này có thể được sử dụng để chuyển sang trang được chỉ định bằng cách đặt liên kết trang tương ứng làm tham số của chức năng khi được truy cập với sự trợ giúp của một nút.
Thí dụ
Hãy làm theo ví dụ dưới đây:
< trung tâm >< h2 > Thay đổi nguồn iframe Trong JavaScript h2 >
< id khung nội tuyến = 'trang web' src = 'https://linuxhint.com/detect-tab-key-javascript/' bề rộng = '1000' Chiều cao = '550' viền khung = '0' cuộn = 'Không' > iframe >
< anh >< anh >
< nút onclick = 'changeIframe('https://linuxhint.com/category/linux-commands/')' > Nhấp để hiển thị Trang lệnh Linux cái nút >
< anh > anh >
trung tâm >
Trong các dòng mã trên, hãy thực hiện các bước sau:
- Chỉ định liên kết đã nêu trong phần “
” cùng với kích thước đã điều chỉnh. - Ngoài ra, hãy tạo một nút có đính kèm “ trong một cái nhấp chuột ” sự kiện chuyển hướng đến hàm changeIframe() có liên kết được chỉ định làm tham số của nó.
- Điều này sẽ dẫn đến việc hướng trang đến liên kết đã nêu khi nhấp vào nút.
Hãy tiếp tục với phần JavaScript của mã:
< loại kịch bản = 'văn bản/javascript' >
hàm số thay đổiIframe ( biến đổi ) {
tài liệu. getElementById ( 'trang web' ) . src = biến đổi ;
}
script >
Trong đoạn mã trên:
- Khai báo một hàm có tên là “ thay đổiIframe() ”.
- Theo định nghĩa của nó, truy cập vào liên kết được chỉ định trong “ khung nội tuyến ” phần tử bằng cách sử dụng “ tài liệu.getElementById() ' phương pháp.
- Sau đó, áp dụng “ src ” thuộc tính và phân bổ liên kết đã nêu khi chức năng truy cập vào liên kết được truy cập bằng tham số “ biến đổi ”.
- Điều này sẽ dẫn đến việc chuyển đổi các trang đối với các liên kết được chỉ định khi nhấp vào nút.
đầu ra
Trong đầu ra ở trên, có thể thấy rằng các trang được chuyển khi nhấp vào nút.
Cách tiếp cận 2: Thay đổi nguồn khung nội tuyến trong JavaScript bằng cách sử dụng thuộc tính chỉ mục đã chọn
Các ' mục lục được chọn ” thuộc tính trả về chỉ mục của tùy chọn đã chọn trong danh sách thả xuống. Thuộc tính này có thể được áp dụng để chuyển hướng đến liên kết đã chỉ định đối với giá trị của tùy chọn đã chọn từ danh sách thả xuống.
Thí dụ
Hãy quan sát ví dụ sau:
< id khung nội tuyến = 'trang web' src = 'https://linuxhint.com/detect-tab-key-javascript/' bề rộng = '1000' Chiều cao = '550' viền khung = '0' cuộn = 'Không' > iframe >
< anh >< anh >
< chọn id = 'liên kết' >
< giá trị tùy chọn = 'https://linuxhint.com/auto-refresh-web-page-every-5-seconds-javascript/' > Chuyển sang bài báo 1
< giá trị tùy chọn = 'https://linuxhint.com/convert-array-to-object-javascript/' > Chuyển sang bài báo hai
lựa chọn >
< anh >< anh >
< nút onClick = 'thay đổiIframe();' > Thay đổi Iframe Src cái nút >
< anh >< anh >
thân hình > trung tâm >
Trong các dòng mã trên, hãy thực hiện các bước sau:
- Nhớ lại bước chỉ định liên kết đã nêu trong “