Вопрос или проблема
Я добавил iframe на свой сайт. Внутри iframe находится область, которая не требуется, и я хотел бы ее скрыть.
Я попытался внедрить CSS в i-frame, используя
Functions.php
add_action( 'wp_enqueue_scripts', 'Eazy_scripts' );
function Eazy_scripts() {
wp_register_script('js-iframe', get_stylesheet_directory_uri() . '/js/iframe.js', array('jquery'),'1.1', true);
wp_enqueue_script('js-iframe');
}
Скрипт iframe.js
jQuery(document).ready(function(){
jQuery("#EazyOpsFrame").on("load", function() {
let head = $("#EazyOpsFrame").contents().find("head");
let css="<style>div.fixed.area{display:none !important}</style>";
jQuery(head).append(css);
});
});
Это, похоже, не работает. Есть ли какие-либо рекомендации?
Если источник iframe находится не на том же домене, что и страница, на которой он встроен, вы не можете изменить содержимое внутри iframe.
Если источник iframe находится на том же домене, добавьте CSS непосредственно на страницу источника.
Подробнее: https://stackoverflow.com/a/36513940
.
Ответ или решение
Введение стиль в CSS в iframe может быть сложной задачей, особенно если учитываются ограничения безопасности браузера. В данном случае, проблема заключается в том, чтобы скрыть определенную область внутри iframe с использованием CSS. Рассмотрим возможные решения ситуации, исходя из предоставленной информации.
Анализ ситуации
- Изначальные попытки: В тексте описано использование скрипта на jQuery, который пытается добавить CSS в
<head>iframe. Однако это не сработало, вероятно, из-за политики безопасности браузера, которая ограничивает доступ к содержимому iframe, если он загружен с другого домена. - Ограничения: Если источник iframe находится на другом домене, манипуляции с его содержимым будут заблокированы по соображениям безопасности (политика Same-Origin).
Решения для задачи
-
Тот же домен:
- Если источник iframe находится на том же домене, наиболее простым решением будет добавить CSS непосредственно на страницу, которая загружается в iframe. Это можно сделать, отредактировав HTML-страницу источника и включив в неё нужные стилевые изменения.
-
Кросс-доменные ограничения:
- В случае, если iframe загружает контент с другого домена и у вас нет к нему доступа, способ решения задачи усложняется. Политика Same-Origin запрещает изменение содержимого такого iframe из-за соображений безопасности.
-
Альтернативные подходы:
- Прокси-сервер: Создайте сервер-посредник на вашем домене, через который будет проходить запрос к стороннему контенту. Это даст возможность модификации страницы до её загрузки в iframe, но такой подход требует значительных изменений в структуре.
- API-методы: Если у стороннего сервера есть API, позволяющее извлекать или модифицировать данные, изучите возможность использования этих методов для манипуляции контентом до его загрузки в iframe.
Заключение
Внедрение CSS в содержимое iframe требует учёта настроек безопасности и технических ограничений. Если контент находится на вашем домене, решение станет чисто технической задачей изменения HTML-страницы источника. В случае работы с внешним источником потребуется более сложный технический подход или пересмотр архитектуры решения. Обязательно учитывайте аспекты безопасности и правомерность доступа к сторонним ресурсам в процессе решения задачи.