Применение CSS в iFrame

Я пытаюсь изменить ширину моего рекламного изображения с пикселей на проценты. Я использую Google DoubleClick или "DFP". Он автоматически помещает ваше рекламное изображение в iframe, что очень затрудняет изменение фактических размеров изображения.

Итак, способ, которым я изменил ширину изображения с пикселей на проценты, заключается в том, что я сделал div (то есть 90% веб-страницы), обернутый вокруг графического объявления, а затем установил ширину изображения на 100%, поэтому, когда обертки ширина изменяется при изменении ширины браузера, изображение внутри него всегда будет заполнять оболочку. Но я не знаю, как заставить все это работать, так как изображение находится внутри iframe (глупый DFP !!!)

Вот коды CSS для... оболочки:

#div-gpt-ad-1362958263281-0 {width:90%; border:1px solid black;}

затем iframe, который находится в обертке:

iframe {width:100%;}

затем, наконец, фактическое изображение, в котором я попробовал несколько селекторов CSS и разные классы div:

.img_ad, a#aw0, iframe>.img_ad, iframe>#google_image_div>.img_ad {width:100%; display:block; border:1px solid red !important;}

Если вы проверите элемент в Google Chrome на рекламном изображении, вы увидите, что CSS не применяется к изображению. Все, что я хотел бы сделать, это изменить ширину изображения в процентах... а также высоту на auto. Это действительно должно быть так сложно? Возможно ли это, поскольку изображение находится в iframe? Готовит ли DFP меня к провалу? Я просто не знаю... Но как мне изменить код графического объявления? Любая помощь действительно будет оценена по достоинству, ребята! :)

Вот jsFiddle: http://jsfiddle.net/EptwH/3/


javascript html css google-dfp
person Dyck    schedule 11.03.2013    source источник
comment
вы не должны изменять размер объявлений DFP, предположительно, кто-то платит за то, чтобы его объявление отображалось в заранее определенном размере. Во-первых, я знаю, что не хочу, чтобы креативы, за которые я плачу (размером 300 x 250), были уменьшены в соответствии с потребностями сайта, на котором они отображаются.   -  person Nick Andriopoulos    schedule 12.03.2013
comment
@hexblot весь мой сайт вращается вокруг моих миниатюр и объявлений, размеры которых слегка меняются для разных размеров браузера/разрешения экрана, это то, о чем мои рекламодатели будут проинформированы, прежде чем размещать рекламу у меня. Усадка минимальна, лол.   -  person Dyck    schedule 12.03.2013
comment
Вы пытаетесь нацелить элементы со страницы на внутренний внешний источник ‹iframe› ??   -  person Milche Patern    schedule 12.03.2013
comment
@Dyck правильный способ сделать это — определить несколько размеров для креативов и перезагрузить их с помощью Javascript, а не трогать креативы.   -  person Nick Andriopoulos    schedule 12.03.2013
comment
@hexblot Ширина миниатюр моих веб-сайтов указана в процентах, это не сработает, потому что мои миниатюры изменят размер при изменении ширины браузера, а мои креативы - нет. Я чувствую, что должен быть способ изменить ширину изображения в процентах, хммм....   -  person Dyck    schedule 12.03.2013
comment
@MilchePatern Я использую сгенерированный код javascript из Google для отображения рекламы / изображений ... независимо от того, что они отображаются через iframe, надеюсь, это поможет. :)   -  person Dyck    schedule 12.03.2013
comment
@Dyck Ну, тогда ты не сможешь это сделать. Если iframe здесь находится в другом домене. Вы не можете изменить его содержимое с помощью CSS или JS.   -  person Milche Patern    schedule 12.03.2013
comment
@hexblot знаете ли вы какой-либо способ отключить iframe, чтобы реклама отображалась без него? это вообще возможно?   -  person Dyck    schedule 12.03.2013
comment
@Dyck, насколько я могу судить, вы продолжаете предполагать, что iframe содержит только изображения. Объявления основаны не только на изображениях, и другие типы не так легко изменить размер (например, flash). Наконец, имейте в виду, что в большинстве случаев фальсификация будет рассматриваться как попытка мошенничества со стороны DFP и может привести к блокировке аккаунта. Я не знаю способов изменить обслуживаемый контент, так как всегда обходил эти ограничения.   -  person Nick Andriopoulos    schedule 12.03.2013

Ответы (3)


arrow_upward
1
arrow_downward

iframe здесь находится в другом домене. Вы не можете изменить его содержимое с помощью CSS или JS.

person Mooseman    schedule 11.03.2013
comment
он создается из Google для моего собственного веб-сайта, смогу ли я изменить его через свой собственный веб-сайт и какой-нибудь JS? - person Dyck; 12.03.2013
comment
Предполагая, что вы можете использовать JS, он все равно будет отложен до загрузки страницы. Следовательно, любое позиционирование не будет изменено до начальной загрузки, что вызовет перерисовку и другие проблемы с производительностью. Почему вы хотите изменить содержание? - person Mooseman; 12.03.2013
comment
Содержимое iframe — это, по сути, графическое объявление, то есть именно то, что оно есть, изображение, которое является рекламой. И я загрузил эти изображения с помощью DFP (рекламной программы Google), а затем DFP дал мне коды для размещения на моем веб-сайте. Код генерирует изображение в iframe. Мне нужно изменить ширину графического объявления с пикселей на проценты. Я так понимаю, это никак не исправить? - person Dyck; 12.03.2013
comment
Верный. Это часть смысла iframe: сайт не может редактировать его. - person Mooseman; 12.03.2013
comment
iframe DFP немного отличаются, и вы можете их редактировать, см. мой ответ jsfiddle. - person Matt Cooper; 15.05.2013

arrow_upward
3
arrow_downward

Я обнаружил, что могу использовать синхронную загрузку в сочетании с «умным iframe», который рекламирует Google, что я могу вырвать ссылку из их iframe и поместить ее в свою DOM.

Обратите внимание, что я передаю тот же идентификатор для кода dfp моему методу AdjustGoogleAd. Я возился с атрибутами ширины/высоты, потому что мы на адаптивном сайте.

<script type='text/javascript'>
    (function () {
        var useSSL = 'https:' == document.location.protocol;
        var src = (useSSL ? 'https:' : 'http:') +
        '//www.googletagservices.com/tag/js/gpt.js';
        document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
    })();
</script>
<script type='text/javascript'>
    googletag.defineSlot('{AD SLOT HERE}', [WIDTH, HEIGHT], 'dfp-div-id').addService(googletag.pubads());
    googletag.pubads().enableSyncRendering();
    googletag.pubads().enableSingleRequest();
    googletag.enableServices();

    $(function () {
        AdjustGoogleAd('dfp-div-id');
    });

    function AdjustGoogleAd(bannerId) {
       var banner = $('#' + bannerId);
       var contents = $('#' + bannerId + ' iframe').contents();

       contents.find('a').clone().attr('id', bannerId + '_a').appendTo('#' + bannerId);
       var newLink = $('#' + bannerId + '_a');
       newLink.siblings().remove();
       newLink.find(".img_ad").removeAttr('height').removeAttr('width');
    }

</script>

С HTML:

<div id='dfp-div-id'>
     <script type='text/javascript'>
         googletag.display('dfp-div-id');
     </script>
</div>
person JonK    schedule 16.04.2013

arrow_upward
2
arrow_downward

Вот jsfiddle с примером того, что, я уверен, вы хотите сделать... так что да, это возможно... нарушает ли это условия DFP - это другой вопрос!

http://jsfiddle.net/e3dUT/ (измените размер панелей, чтобы увидеть, как он работает, работает на 100 % только в chrome на данный момент, но это должно быть просто вопросом его настройки.)

$.dfp({
    dfpID: '12589173',
    afterAllAdsLoaded: function ($adUnits) {
        $('iframe').attr('width', '100%').attr('height', '100%');
        $adUnits.each(function () {
            $contents =  $(this).find('iframe:first').contents();
            $contents.find('img').width('100%').height('auto');
        });
    }
});

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

person Matt Cooper    schedule 15.05.2013