iFrame中应用CSS(Applying CSS within an iFrame)

我想我的广告图像的宽度从像素更改为百分比。我使用的是谷歌的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;}

如果你在谷歌浏览器的广告图像检查元素，你将看到CSS没有被应用到图像。所有我想要做的是改变图像宽度成比例..，也是高度auto 。如果真的这么难？这甚至可能由于图像是在一个iframe？是DFP设置我的失败？我只是不知道......不过，我将如何改变图像广告的代码？任何帮助将真正真正真正理解家伙！ :)

这里是的jsfiddle： http://jsfiddle.net/EptwH/3/

Answer 1:

该iframe这里是一个不同的域。您不能修改它与CSS或JS内容。

Answer 2:

我发现我可以使用同步加载，在路口的“智能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 3:

这里是什么，我敢肯定你想做的事......一个例子的的jsfiddle所以是有可能......它是否违反DFP条款是另外一个问题！

http://jsfiddle.net/e3dUT/ （调整窗格看到它的工作，只是在镀铬目前的工作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以及。

文章来源: Applying CSS within an iFrame