Блог

Главная - Вопросы по программированию - Добавьте стиль к элементу документа iFrame #

Добавьте стиль к элементу документа iFrame #

#javascript #jquery

Вопрос:

Поэтому я немного застрял и ищу, не может ли кто-нибудь оказать мне некоторую помощь, поэтому у меня есть следующий код jQuery:

 let VimeoBlock = function($element) {
    function init() {
        adjustPositioning();
    }

    function adjustPositioning() {
        const classList = $element.attr('class');
        if (classList.indexOf('alignwide') > -1) {
            const vimeo_iframe = $element.find('iframe');
            console.log(vimeo_iframe);
        }
    }

    return {
        init: init,
    }
}

$(document).ready(function () {
    $('.wp-block-embed-vimeo').each(function (i, ele) {
        (new VimeoBlock($(ele))).init();
    });
});

console.log(vimeo_iframe); выводит следующие элементы, когда я могу получить доступ к iFrame индексу с его свойствами:

введите описание изображения здесь

Я могу настроить таргетинг iFrame , но я хочу иметь возможность настроить таргетинг на родительский класс внутри iFrame — Как бы я сделал это и добавил CSS к этому классу?

введите описание изображения здесь

Комментарии:

1. Почти уверен, что вы можете ориентироваться только на сам элемент iframe (граница, поля и т. Д.), Но не на какой-либо контент (внутри html), если он не из того же домена из-за проблем с безопасностью.

2. Если iframe находится в другом источнике, вы не сможете получить доступ к его DOM. См.: Политика перекрестного происхождения

3. Это не в том же домене, я надеялся, что смогу нацелиться на родительский класс, потому что у него есть важные спецификации ширины, и я хотел его перезаписать.

4. Спасибо за разъяснения, ребята!

Ответ №1:

Поскольку вы не можете сделать это для стиля iframe, если он находится в другом источнике, в этом случае решения нет. Однако, если бы это был тот же домен или iframe домен с внутренней структурой, вы могли бы сделать это так:

 document.getElementById("youriframeid").contentDocument.querySelector("yourselector").style.display = 'none';

Обратите внимание, что я использовал фиктивные селекторы и фиктивный стиль, вместо этого вы можете использовать свой.

Метки: