Αυτό το ιστολόγιο θα εξηγήσει πώς να αλλάξετε την πηγή iframe στο JavaScript.
Τι είναι ένα Inline Frame;
ένα ' ενσωματωμένο πλαίσιο ' χρησιμοποιείται για να περιέχει ένα άλλο καθορισμένο έγγραφο στο τρέχον έγγραφο. Αυτό έχει ως αποτέλεσμα την εναλλαγή των ιστοσελίδων με βάση τους αναφερόμενους συνδέσμους.
Πώς να αλλάξετε την πηγή του Iframe σε JavaScript;
Η πηγή του Iframe μπορεί να αλλάξει σε JavaScript χρησιμοποιώντας τις ακόλουθες προσεγγίσεις μαζί με το ' getElementById() 'μέθοδος:
- ' Περασμένη παράμετρος ' Τεχνική.
- ' επιλεγμένο Ευρετήριο ” Περιουσία.
Προσέγγιση 1: Αλλαγή της πηγής Iframe σε JavaScript χρησιμοποιώντας την τεχνική Passed Parameter
Αυτή η τεχνική μπορεί να χρησιμοποιηθεί για να μεταβείτε στην καθορισμένη σελίδα τοποθετώντας τον αντίστοιχο σύνδεσμο σελίδας ως παράμετρο μιας συνάρτησης όταν προσπελάσετε με τη βοήθεια ενός κουμπιού.
Παράδειγμα
Ας ακολουθήσουμε το παρακάτω παράδειγμα:
< κέντρο >< h2 > Αλλάξτε την πηγή iframe σε JavaScript h2 >
< iframe id = 'ιστοσελίδα' src = 'https://linuxhint.com/detect-tab-key-javascript/' πλάτος = '1000' ύψος = '550' πλαίσιο πλαισίου = '0' κύλιση = 'Οχι' iframe >
< br >< br >
< κουμπί κάνοντας κλικ = 'changeIframe('https://linuxhint.com/category/linux-commands/')' > Κάντε κλικ για να εμφανιστεί η σελίδα εντολών Linux κουμπί >
< br br >
κέντρο >
Στις παραπάνω γραμμές κώδικα, εκτελέστε τα ακόλουθα βήματα:
- Καθορίστε τον αναφερόμενο σύνδεσμο στο ' <ενσωματωμένο πλαίσιο> ετικέτα μαζί με τις προσαρμοσμένες διαστάσεις.
- Επίσης, δημιουργήστε ένα κουμπί με συνημμένο ' στο κλικ ” ανακατεύθυνση συμβάντος στη συνάρτηση changeIframe() με την καθορισμένη σύνδεση ως παράμετρό της.
- Αυτό θα έχει ως αποτέλεσμα την κατεύθυνση της σελίδας στον αναφερόμενο σύνδεσμο με το πάτημα του κουμπιού.
Ας συνεχίσουμε στο τμήμα JavaScript του κώδικα:
< τύπο σεναρίου = 'κείμενο/javascript' >
λειτουργία changeIframe ( αλλαγή ) {
έγγραφο. getElementById ( 'ιστοσελίδα' ) . src = αλλαγή ;
}
γραφή >
Στο παραπάνω απόσπασμα κώδικα:
- Δηλώστε μια συνάρτηση με το όνομα ' changeIframe() '.
- Στον ορισμό του, αποκτήστε πρόσβαση στον καθορισμένο σύνδεσμο στο ' ενσωματωμένο πλαίσιο ' στοιχείο χρησιμοποιώντας το ' document.getElementById() 'μέθοδος.
- Μετά από αυτό, εφαρμόστε το ' src ' χαρακτηρίστε και εκχωρήστε τον δηλωμένο σύνδεσμο στη συνάρτηση πρόσβαση στον σύνδεσμο στον οποίο έχετε πρόσβαση χρησιμοποιώντας την παράμετρο ' αλλαγή '.
- Αυτό θα έχει ως αποτέλεσμα την εναλλαγή των σελίδων σε σχέση με τους καθορισμένους συνδέσμους όταν κάνετε κλικ στο κουμπί.
Παραγωγή
Στην παραπάνω έξοδο, μπορεί να παρατηρηθεί ότι οι σελίδες αλλάζουν με κλικ στο κουμπί.
Προσέγγιση 2: Αλλαγή της πηγής Iframe σε JavaScript χρησιμοποιώντας την ιδιότητα επιλεγμένου ευρετηρίου
Ο ' επιλεγμένο Ευρετήριο Η ιδιότητα ' επιστρέφει το ευρετήριο της επιλεγμένης επιλογής σε μια αναπτυσσόμενη λίστα. Αυτή η ιδιότητα μπορεί να εφαρμοστεί για ανακατεύθυνση στον καθορισμένο σύνδεσμο σε σχέση με την τιμή της επιλεγμένης επιλογής από την αναπτυσσόμενη λίστα.
Παράδειγμα
Ας παρατηρήσουμε το ακόλουθο παράδειγμα:
< iframe id = 'ιστοσελίδα' src = 'https://linuxhint.com/detect-tab-key-javascript/' πλάτος = '1000' ύψος = '550' πλαίσιο πλαισίου = '0' κύλιση = 'Οχι' iframe >
< br >< br >
< επιλέξτε αναγνωριστικό = 'συνδέσεις' >
< τιμή επιλογής = 'https://linuxhint.com/auto-refresh-web-page-every-5-seconds-javascript/' > Μετάβαση στο άρθρο 1
< τιμή επιλογής = 'https://linuxhint.com/convert-array-to-object-javascript/' > Μετάβαση στο άρθρο δύο
επιλέγω >
< br >< br >
< κουμπί onClick = 'changeIframe();' > Αλλάξτε το Iframe Src κουμπί >
< br >< br >
σώμα κέντρο >
Στις παραπάνω γραμμές κώδικα, εκτελέστε τα ακόλουθα βήματα:
- Θυμηθείτε το βήμα για τον καθορισμό του δηλωμένου συνδέσμου μέσα στο '