Тело в стиле JavaScript вне iframe

Как можно стилизовать самый внешний тег body с помощью JavaScript из внутреннего тега body iFrame?

<html>
  <head>
  </head>
  <body>
    <div id = "ad_tag" style = "width: 1px; height: 1px;">
      <div id = "ad_container" style = "border: 0pt none;">
        <iframe id = "ad_iframe" title = "title" name = "name" scrolling = "no" marginwidth = "0" marginheight = "0" style = "border: 0px none; vertical-align: bottom;" srcdoc = "" width = "1" height = "1" frameborder = "0">
          <html>
            <head>
            </head>
            <body topmargin = "0" leftmargin = "0" marginwidth = "0" marginheight = "0">
              <script>
              parent.document.body.style.background = "url('https://news.nationalgeographic.com/content/dam/news/photos/000/676/67655.jpg') no-repeat top center fixed #ffffff";
              </script>
            </body>
          </html>
        </iframe>
      </div>
    </div>
    <div id = "content">
    </div>
  </body>
</html>

В этом конкретном случае:
- Прямое редактирование атрибутов или стилей запрещено, существующие предустановлены.
- Редактировать можно только дочерние элементы самого внутреннего тела.
- Цель состоит в том, чтобы доставить фоновое изображение с помощью Google DFP.

Есть ли у iframe разрешение на доступ к родительскому документу?

— 22.04.2018 22:31

@CertainPerformance, да.

— 23.04.2018 09:58

javascript css iframe google-dfp skin

22.04.2018 22:30

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

336

Ответы 1

Лучше всего было бы отправить сообщение из фрейма, которое родитель (сайт) будет выполнять через слушателя. Итак, ваш iframe должен содержать код вроде:

<script>
     window.parent.postMessage({
        'func': 'changeBackground',
        'message': ''
    }, "*");
</script>

И ваш родитель (сайт) должен содержать слушателя вроде:

<script type = "text/javascript">
if (window.addEventListener) {
    window.addEventListener("message", onMessage, false);       
}
else if (window.attachEvent) {
    window.attachEvent("onmessage", onMessage, false);
}



function onMessage(event) {
    var data = event.data;
    if (typeof(window[data.func]) == "function") {
        window[data.func].call(null, data.message);
    }
}

function changeBackground(message) {

    $('div#backgroundwrapper').css({
        'background-image': 'url("https:/example.com/example.jpg")',
    $('div#backgroundwrapper').click();
        var win = window.open( '%%CLICK_URL_ESC%%%%DEST_URL%%', '_blank');
    win.focus();
    });
}
</script>

В моем примере он поместит файл изображения в качестве фона в div с ID backgroundwrapper. В моем примере для изменения CSS и добавления метки клика используется jQuery, но это можно сделать и без него.

28.04.2018 03:30

Другие вопросы по теме

Как установить кнопку табуляции max-height: 20px; CSS

Как скрыть края SVG на основе размера div

Повторение водяного знака на каждой печатной странице? Javascript или css

Выровняйте два элемента разной высоты в середине div

Плеер Javascript не работает в Opera / Chrome

Calc () не работает с преобразованием в Internet Explorer / Microsoft Edge

Регулировка значения заполнения с учетом высоты браузера

Правое меню начальной загрузки 4 на маленьком устройстве

Отзывчивый эффект матового стекла на фоне карты

Не удается выровнять содержимое div по правому краю, используя bootstrap 4 в качестве фреймворка

Тело в стиле JavaScript вне iframe

Ответы 1

Другие вопросы по теме

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