Question

我正在尝试将广告图片的宽度从像素更改为百分比。我正在使用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/

Answer 1

我发现我可以使用同步加载，与“聪明的iframe”谷歌的交配，我可以从他们的iframe中删除链接并将其放在我的DOM中。

请注意，我将dfp代码的相同ID传递给我的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>

Answer 2

这是一个jsfiddle，其中有一个我非常确定你想要做的例子......所以是的，有可能......是否违反DFP的条款是另一个问题！

http://jsfiddle.net/e3dUT/（调整窗格以使其正常工作，目前仅在Chrome中使用100％，但这应该只是将其调整一些。）

$.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中实现它。

Answer 3

此处的iframe位于不同的域中。你不能用CSS或JS修改它的内容。

在iFrame中应用CSS

3 个答案: