Как можно встраивать iframe на страницу?

Question

Динар

javascript

Как можно встраивать iframe на страницу?

Здравствуйте!
Как я могу изменить стили классов для оформления фрейма, который разместили для отображения отзывов от Яндекса? Я попытался получить доступ к фрейму и изменить классы, но мой код не работает. Вот мой код:

var iframe = document.getElementById('https://yandex.ru/maps-reviews-widget/1116653130656562?comments');
iframe.contentWindow.postMessage({ action: 'addStylesToBadge' }, '');

window.addEventListener('message', function(event) {
  if (event.origin === 'https://домен-главной-страницы' && event.data.action === 'addStylesToBadge') {
    var badges = document.getElementsByClassName('badge');
    for (var i = 0; i < badges.length; i++) {
      badges[i].style.backgroundColor = 'red';
      badges[i].style.color = 'white';
    }
  }
});

Можете ли вы помочь мне разобраться, почему мой код не работает?

19 января 2024 г. 10:10

Ответы на вопрос 2

Похожие вопросы

Answer 1

Для встраивания `iframe` на страницу используется HTML-элемент `<iframe>`. Вот пример базового использования для встраивания страницы:

```html
<iframe src="https://example.com" width="600" height="400"></iframe>
```

Теперь по поводу изменения стилей внутри `iframe`. Если `iframe` загружает контент с того же домена, что и родительская страница, то манипулировать содержимым `iframe` можно напрямую через JavaScript. Однако когда содержимое `iframe` загружено с другого домена (как, например, виджет отзывов от Яндекса), то по соображениям безопасности браузеры препятствуют доступу к этому содержимому из-за политики одного источника (Same-origin policy).

Чтобы обойти эту политику и внести изменения в стили внутри `iframe` с другого домена, можно воспользоваться следующими подходами:

1. **CORS (Cross-Origin Resource Sharing):** Если сервер на другом домене поддерживает CORS и явно разрешает ваш домен в заголовках `Access-Control-Allow-Origin`, то вы сможете получить доступ к содержимому фрейма через JavaScript. Но это довольно редкое явление для сервисов, предоставляющих embed-контент.

2. **JavaScript postMessage API:** Это безопасный способ для осуществления взаимодействия между документами, загруженными в `iframe`, и родительским окном, но он требует поддержки и настройки со стороны обеих страниц. Именно этот подход вы попытались использовать в своём коде.

Исходя из вашего кода, кажется, что вы пытаетесь воспользоваться `postMessage`, чтобы указать `iframe` на изменение стилей. Однако для того, чтобы это сработало, внутри `iframe` должен быть JavaScript-код, который прослушивает события `message` и реагирует на них, изменяя стили. Если вы не контролируете содержимое `iframe`, то изменить его стили через `postMessage` вы не сможете, если только сам виджет не предоставляет такую возможность.

Пересмотрите документацию виджета от Яндекса, чтобы понять, поддерживает ли он какой-либо механизм для изменения стилей через `postMessage`. Если нет, то, скорее всего, вы не сможете изменить стили, и вам придется использовать стандартный вид, предлагаемый Яндексом.

Важно отметить, что `getElementById` принимает в качестве аргумента идентификатор элемента, а не URL. В вашем случае нужен id, который вы присвоили `iframe`.

Если вы всё-таки контролируете содержимое `iframe` (что в случае с Яндекс виджетом маловероятно), вы бы использовали следующую конструкцию для доступа к содержимому `iframe`:

```javascript
var iframe = document.getElementById('your-iframe-id'); // здесь должен быть id, а не URL

// Отправка сообщения в iframe, если это ваш контролируемый iframe.
iframe.contentWindow.postMessage({ action: 'addStylesToBadge' }, '*');

// Обработка сообщений в самом iframe.
window.addEventListener('message', function(event) {
  // Проверяем источник сообщения
  if (event.origin === 'https://домен-родитель

Answer 2

Получить доступ внутрь фрейма с другим доменом невозможно.