JS властивість Array.embeds
Загальний опис
Властивість embeds в об'єкті Document відкриває доступ до колекції усіх елементів <embed> у поточному документі. Ці елементи використовуються для вбудовування зовнішнього контенту, такого як відео, аудіо, інтерактивні мапи та інші мультимедійні об'єкти безпосередньо у HTML-документ. Властивість embeds, яка є синонімом до document.getElementsByTagName('embed'), надає простий спосіб для доступу та маніпуляції з цими елементами, що робить її незамінною для веб-розробників, які прагнуть динамічно керувати вбудованим контентом на своїх веб-сторінках.
Використання властивості embeds дозволяє розробникам легко отримувати доступ до всіх елементів <embed> на сторінці. Це може бути корисно для динамічної зміни властивостей цих елементів, наприклад, зміни джерела (src) вбудованого контенту або його атрибутів (наприклад, розміру) засобами JavaScript.
Приклади використання
Отримання кількості вбудованих елементів:
Для початку, ви можете просто підрахувати кількість вбудованих елементів на сторінці:
console.log(document.embeds.length);
Цей код виводить в консоль кількість елементів <embed>, знайдених у поточному документі.
Зміна властивостей вбудованих елементів:
Розглянемо, як змінити джерело для всіх вбудованих елементів:
for (let i = 0; i < document.embeds.length; i++) {
document.embeds[i].src = 'https://example.com/new-content.swf';
}
У цьому прикладі для кожного вбудованого елемента змінюється атрибут src, що дозволяє замінити весь вбудований контент на новий.
Взаємодія з конкретним вбудованим елементом:
Якщо потрібно працювати лише з одним конкретним елементом, можна використовувати ідентифікатор або інший селектор для доступу до нього:
let myEmbed = document.getElementById('myEmbedId');
myEmbed.width = '640'; // Зміна ширини
myEmbed.height = '480'; // Зміна висоти
Такий підхід дає можливість точно керувати кожним елементом <embed>, налаштовуючи його властивості відповідно до потреб розробки.
| Порада: | Переглядайте колекцію |
| Порада: | Для масової зміни атрибутів усіх |
| Порада: | Використовуйте |
Синтаксис
Document.embedsЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
64 |
1 |
10.1 |
51 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
64 |
64 |
4 |
10.3 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
У цьому прикладі ми створили інтерактивну сторінку, де користувачі можуть додавати та видаляти елементи <embed>, такі як PDF-файли, за допомогою кнопок. Кожен раз, коли додається або видаляється елемент <embed>, в консоль виводиться оновлена кількість цих елементів на сторінці. Цей приклад ілюструє, як можна використовувати document.embeds для динамічного керування вбудованим контентом на веб-сторінці.
У цьому прикладі ми демонструємо базове використання властивості document.embeds для підрахунку кількості елементів <embed> на веб-сторінці. Властивість document.embeds повертає колекцію всіх елементів <embed> у документі, що дозволяє легко отримати доступ до них та виконати різноманітні операції, такі як підрахунок.
// Підрахунок та виведення кількості елементів <embed> на сторінці
console.log('Кількість елементів <embed> на сторінці: ' + document.embeds.length);У складнішому прикладі ми використовуємо document.embeds для доступу до елементів <embed> та зміни їх атрибутів. Цей приклад може бути корисним у ситуаціях, коли необхідно динамічно оновити вміст або властивості вбудованих ресурсів, наприклад, змінити джерело відео або іншого мультимедійного контенту.
// Динамічна зміна джерела для першого елемента <embed> на сторінці
if (document.embeds.length > 0) {
const firstEmbed = document.embeds[0]; // Отримання першого елемента <embed>
firstEmbed.src = 'https://example.com/new-content.svg'; // Зміна джерела контенту
console.log('Джерело першого елемента <embed> змінено на: ' + firstEmbed.src);
}