1

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

4

3 回答 3

3

我发现我可以使用同步加载，结合谷歌吹捧的“智能 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>
于 2013-04-16T14:27:59.007 回答
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 中实现它。

于 2013-05-15T08:54:05.543 回答
1

这里iframe是不同的域。你不能用 CSS 或 JS 修改它的内容。

于 2013-03-11T22:36:09.907 回答