JS властивість Document.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 для аналізу наявних <embed> елементів, що може допомогти у виявленні та усуненні проблем з відображенням або доступністю вбудованого контенту. Наприклад, це може бути корисно при аудиті веб-доступності, забезпечуючи альтернативний контент для користувачів із обмеженими можливостями.

автор: Bond правити

Порада

Використовуйте document.embeds для визначення кількості <embed> елементів на сторінці, що може слугувати індикатором загальної кількості вбудованого контенту. Це допоможе у вимірюванні впливу вбудованих елементів на час завантаження сторінки та загальну продуктивність, дозволяючи оптимізувати веб-ресурси для кращого користувацького досвіду.

автор: Bond правити

Порада

Для масової зміни атрибутів усіх <embed> елементів скористайтеся ітерацією по колекції document.embeds, що дозволяє автоматизувати процеси настройки, наприклад, при зміні шляхів доступу до медіа-ресурсів або їх параметрів. Це значно спрощує управління вбудованим контентом на великих веб-сайтах.

Array.from(document.embeds).forEach(embed => {
    embed.src = 'новий_шлях_до_ресурсу';
});

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

Document.embeds

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	36	61	10.1	51	12	4

Підтримка: мобільні переглядачі

Переглядач
	37	36	61	10.3

Приклади

+ запропонувати свій приклад у пісочниці

<header>
  <h2 class="title">document.embeds</h2>
  <p class="description">Повертає колекцію усіх вбудованих елементів (<embed>) документа.</p>
</header>
<main>
  <div class="result">
    <button id="addEmbed">Додати елемент <embed></button>
    <button id="removeEmbed">Видалити останній елемент <embed></button>
    <div id="embedsContainer"></div>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

button {
  margin: 5px;
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
}

#embedsContainer embed {
  display: block;
  margin-top: 10px;
  max-width: 100%;
  height: auto;
  background-color: #666;
}

// Вбудований документ зібрано просто тут — приклад нічого не вантажить
const SAMPLE = "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='120'>"
  + "<rect width='300' height='120' fill='%23f8f8f8' stroke='%23999'/>"
  + "<text x='150' y='68' font-size='22' text-anchor='middle' fill='%23222'>вбудований документ</text></svg>";

document.getElementById('addEmbed').addEventListener('click', function () {
  const embed = document.createElement('embed');
  embed.src = SAMPLE;
  embed.type = 'image/svg+xml';
  embed.style.width = '100%';
  embed.style.height = '200px';
  document.getElementById('embedsContainer').appendChild(embed);
  updateEmbedCount();
});

document.getElementById('removeEmbed').addEventListener('click', function () {
  const embeds = document.getElementById('embedsContainer').getElementsByTagName('embed');
  if (embeds.length > 0) {
    embeds[embeds.length - 1].remove();
    updateEmbedCount();
  }
});

function updateEmbedCount() {
  console.log('Кількість елементів <embed> на сторінці: ' + document.embeds.length);
}
//# sourceURL=pen.js

// Підрахунок та виведення кількості елементів <embed> на сторінці
console.log('Кількість елементів <embed> на сторінці: ' + document.embeds.length);

// Динамічна зміна джерела для першого елемента <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);
}