javascript - 在 iFrame 中应用 CSS

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”Google 宣传，我可以从他们的 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>