Javascript 在iFrame中应用CSS

我正在尝试将广告图像的宽度从像素更改为百分比。我正在使用谷歌双击或DFP。它会自动将您的广告图像放入iframe中，从而很难更改图像的实际尺寸

因此，我将图像宽度从像素更改为百分比的方法是，我制作了一个div，将90%的网页环绕在图像广告上，然后将图像的宽度设置为100%，这样当浏览器宽度调整时包装宽度更改时，其中的图像将始终填充包装。但我不知道如何使这一切工作，因为图像是在一个iframe愚蠢的DFP

这里是CSS代码的。。。包装器：

#div-gpt-ad-1362958263281-0 {width:90%; border:1px solid black;}

iframe {width:100%;}

然后，包装器中的iframe：

#div-gpt-ad-1362958263281-0 {width:90%; border:1px solid black;}

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没有应用到图片上。我所要做的就是将图像宽度更改为百分比。。还有自动高度。真的应该这么难吗？由于图像位于iframe中，这可能吗？DFP是在让我失败吗？我只是不知道。。。但是，我将如何更改图像广告的代码？任何帮助都会得到真正的感谢

以下是JSFIDLE：

---

此处的iframe位于不同的域上。您不能使用CSS或JS修改其内容。

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

我发现我可以使用同步加载，结合智能iframe Google touts，我可以从他们的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>

---

我发现我可以使用同步加载，结合智能iframe Google touts，我可以从他们的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>

---

下面是一个JSFIDLE示例，我非常确定您想要做什么。。。所以是的，这是可能的。。。是否违反DFP条款是另一个问题

调整窗格的大小以查看它是否正常工作，目前在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');
        });
    }
});

---

它使用了我创建的插件，但只要稍加努力，您也可以在现有javascript中实现它。

这里是一个JSFIDLE，其中有一个示例，我非常确定您想要做什么。。。所以是的，这是可能的。。。是否违反DFP条款是另一个问题

调整窗格的大小以查看它是否正常工作，目前在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');
        });
    }
});

---

它使用了我创建的插件，但只要稍加努力，你也可以在库存javascript中实现这一点。

你不应该调整DFP creatives的大小，应该有人付费让他的创意以预定义的尺寸显示出来。我知道，首先，我不希望我支付的300x250的创意被缩小，以满足显示它们的网站的需要。@hexplot我的整个网站都围绕着我的缩略图和广告展开，不同浏览器宽度/屏幕分辨率的广告尺寸略有变化，这是我的广告商在和我一起做广告之前会被告知的事情。收缩是最小的，lol。您是否试图将页面中的元素定位到内部外部源？？？@Dyck正确的方法是为创意定义多个大小，并让他们通过Javascript重新加载，而不是接触创意。@hexblot我的网站缩略图宽度以百分比表示，这是行不通的，因为我的缩略图会随着浏览器宽度的改变而改变大小，但我的创意人员不会。我觉得必须有一种方法将图像宽度更改为一个百分比，嗯……你不应该调整DFP creatives的大小，应该有人付钱让他的创意以预定义的尺寸显示。我知道，首先，我不希望我支付的300x250的创意被缩小，以满足显示它们的网站的需要。@hexplot我的整个网站都围绕着我的缩略图和广告展开，不同浏览器宽度/屏幕分辨率的广告尺寸略有变化，这是我的广告商在和我一起做广告之前会被告知的事情。收缩是最小的，lol。您是否试图将页面中的元素定位到内部外部源？？？@Dyck正确的方法是为创意定义多个大小，并让他们通过Javascript重新加载，而不是接触创意。@hexblot我的网站缩略图宽度以百分比表示，这是行不通的，因为我的缩略图会在浏览器w上改变大小

---

我的创意不会改变，但我的创意不会改变。我觉得必须有一种方法将图像宽度更改为一个百分比，嗯……它是从谷歌为我自己的网站生成的，我能通过我自己的网站和一些JS修改它吗？假设你能使用JS，它仍然会延迟到页面加载之后。因此，在初始加载之前，不会更改任何位置，从而导致重新喷漆和其他性能问题。你为什么要更改内容？iframe的内容本质上是图像广告，这是一个确切的、唯一的图像，它是一个广告。我用DFP一个谷歌广告程序上传了这些图像，然后DFP给我代码放在我的网站上。该代码生成iframe中的图像。我需要将图像广告的宽度从像素更改为百分比。所以是的，我想没有办法解决这个问题，对吗？对。这是iframe的一部分：它不能被站点编辑。DFP iframe稍有不同，您可以编辑它们，请参阅我的JSFIDLE答案。它是从google为我自己的网站生成的，我可以通过我自己的网站和一些JS修改它吗？假设您可以使用JS，它仍然会延迟到页面加载之后。因此，在初始加载之前，不会更改任何位置，从而导致重新喷漆和其他性能问题。你为什么要更改内容？iframe的内容本质上是图像广告，这是一个确切的、唯一的图像，它是一个广告。我用DFP一个谷歌广告程序上传了这些图像，然后DFP给我代码放在我的网站上。该代码生成iframe中的图像。我需要将图像广告的宽度从像素更改为百分比。所以是的，我想没有办法解决这个问题，对吗？对。这是iframe的一部分：它不能被站点编辑。DFP iframe稍有不同，您可以编辑它们，请参阅我的JSFIDLE答案。