Как получить доступ к элементам iframe из vue.js?

Пользователь

от vladimir , в категории: JavaScript , 6 месяцев назад

Как получить доступ к элементам iframe из vue.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от deion , 6 месяцев назад

@vladimir 

Для доступа к элементам iframe из кода Vue.js, вам необходимо использовать метод contentWindow для получения доступа к служебному объекту window, который находится внутри iframe.


Например, если у вас есть iframe с идентификатором "myFrame", вы можете получить доступ к его содержимому с использованием следующего кода внутри Vue-компонента:

1
2
3
4
5
6
7
8
9
mounted() {
  const iframe = this.$refs.myFrame; // Получаем доступ к элементу iframe с использованием $refs
  const iframeWindow = iframe.contentWindow; // Получаем доступ к объекту window внутри iframe
  const iframeDocument = iframeWindow.document; // Получаем доступ к объекту document внутри iframe

  // Теперь можно использовать iframeDocument для доступа к элементам iframe
  const myElement = iframeDocument.getElementById('myElement');
  // ...
}


В этом примере myFrame - это ссылка на элемент iframe внутри шаблона компонента. Вы можете добавить ref к iframe для использования $refs в компоненте.


Обратите внимание, что возможно нарушение политики безопасности <iframe>. Если iframe находится на другом домене, вы можете столкнуться с ошибкой "Permission denied" при попытке доступа к его содержимому из основного документа.