在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

我發現可以將同步加載與Google的“智能iframe”功能結合使用，從而可以將鏈接從其iframe中分離出來並將其放置在DOM中。

請注意，我將dfp代碼的相同ID傳遞給AdjustGoogleAd方法。 我搞砸了width / height屬性，因為我們位於響應式網站上。

<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修改其內容。