Почему не удается получить данные из iframe с JavaScript

· JavaScript и Снипеты · 1 мин чтения

Если вы уже некоторые время работаете с JavaScript, то вероятнее всего вы можете столкнуться с проблемой получения данных (текста и т.д.) из iframe. Это не так просто в JavaScript, потому что есть ограничения по «Same-origin policy». В этой записи я подробно опишу что это такое, почему эта проблема происходит и как её обойти.

Что такое Same-origin policy?

Same-origin policy случается когда с одного домена вы пытаетесь управлять скриптами или документом другого домена.

Поэтому когда вы пытаетесь получить данные из iframe с другого домена с помощью JavaScript, то у вас выдаст ошибку связанную с «permission denied» (отказано в доступе), которая относится к Same-origin policy.

Если у вас все хорошо с английским, можете почитать по этой ссылке.

Есть два решения этой проблемы, ниже я расписал каждый из них.

Решение первое

Вам нужно, чтобы src (источник) атрибут у iframe был домен с которого вы делаете запрос. Например, если вы загружаете её с domain.ru, то источник в iframe тоже должен быть domain.ru.

Например, если я буду пытаться получить данные из следующего iframe:

<iframe src="http://bologer.ru" width="500px" height="150px" id="iframe"></iframe>

То я смогу это сделать, потому что в src указан домен с которого я использую JavaScript для получения контента iframe.

Но если, я пытаюсь получить данные из iframe, но в источнике src указан другой домен, например https://youtube.com, то выдаст ошибку «permission denied».

Решение второе

Использовать PhantomJS. С его помощью можно делать скриншоты, парсить данные, тестировать сайты и многое другое.

Я даже писал статью о том, как парсить актуальные новости с Яндекс. Если для вас этот вариант подходит лучше всего, то эта статья станет не плохим началом.

Источники