Τα iframe είναι στοιχεία HTML που σας επιτρέπουν να ενσωματώσετε εξωτερικό περιεχόμενο, όπως ιστοσελίδες, σε μια τρέχουσα σελίδα. Σε αυτό το άρθρο σας δείχνουμε πώς να αλλάξετε το περιεχόμενο δύο ή περισσότερων iframe χρησιμοποιώντας ένα μόνο κουμπί χρησιμοποιώντας JavaScript.

Τι είναι ένα iframe;

Το iframe είναι ένα στοιχείο HTML που μπορεί να ενσωματώσει εξωτερικό περιεχόμενο σε μια ιστοσελίδα. Μπορείτε να χρησιμοποιήσετε την ετικέτα για να ενσωματώσετε μια ιστοσελίδα, βίντεο, έγγραφο ή άλλο περιεχόμενο πολυμέσων στον ιστότοπό σας. Η βασική δομή ενός iframe είναι η εξής:

Χρησιμοποιώντας JavaScript, μπορείτε να τροποποιήσετε δυναμικά το περιεχόμενο των iframes, παρέχοντας μια πιο διαδραστική και απρόσκοπτη εμπειρία χρήστη.

Παράδειγμα του τρόπου αλλαγής περιεχομένου πολλών iframe από ένα κουμπί

Στο παρακάτω παράδειγμα δείχνουμε πώς να αλλάξετε το περιεχόμενο τριών iframe χρησιμοποιώντας ένα μόνο κουμπί χρησιμοποιώντας JavaScript:

συνάρτηση changeContent() {
document.getElementById("iframe1").src = "new_page1.html";
document.getElementById("iframe2").src = "new_page2.html";
document.getElementById("iframe3").src = "new_page3.html";
//ΠΡΟΣΘΗΚΗ ΠΕΡΙΣΣΟΤΕΡΑ ΠΛΑΙΣΙΑ ΑΝ ΧΡΕΙΑΖΟΝΤΑΙ, ΑΠΛΑ ΑΛΛΑΞΤΕ ΤΟ ID ΚΑΙ ΤΟ URL
}

Αλλάξτε το περιεχόμενο δύο ή περισσότερων iframe από ένα κουμπί

Σε αυτό το παράδειγμα, δημιουργήσαμε τρία iframe με αναγνωριστικά iframe1, iframe2 και iframe3 που ενσωματώνουν page1.html, page2.html και page3.html αντίστοιχα. Στη συνέχεια, δημιουργήσαμε ένα κουμπί που, όταν πατηθεί, εκτελεί τη λειτουργία changeContent(). Αυτή η λειτουργία χρησιμοποιεί getElementById() για να επιλέξετε κάθε iframe και να αλλάξετε το χαρακτηριστικό του src στις νέες σελίδες new_page1.html, new_page2.html και new_page2.html.