Javascript 当使用响应性设计时，呈现适合其容器的最大广告槽的最佳方式是什么？_Javascript_Jquery_Adsense

Javascript 当使用响应性设计时，呈现适合其容器的最大广告槽的最佳方式是什么？

javascript jquery

Javascript 当使用响应性设计时，呈现适合其容器的最大广告槽的最佳方式是什么？,javascript,jquery,adsense,Javascript,Jquery,Adsense,我正在寻找适合谷歌AdSense广告到一个新的（特别是使用）挑战在于，使用响应性设计时，容器的宽度可能会根据浏览器窗口的宽度而变化。虽然这是响应性设计的主要优势之一，但很难适应固定宽度的内容，如广告。例如，对于使用至少1200px宽的浏览器查看页面的用户，给定容器的宽度可能为300px。但在768px宽的浏览器窗口中，同一容器可能只有180px宽我正在寻找JavaScript（jQuery？）解决方案来加载适合容器宽度的最大广告格式假设我有以下广告时段（广告格式）：以下是我需要包含的脚本

我正在寻找适合谷歌AdSense广告到一个新的（特别是使用）

挑战在于，使用响应性设计时，容器的宽度可能会根据浏览器窗口的宽度而变化。虽然这是响应性设计的主要优势之一，但很难适应固定宽度的内容，如广告。例如，对于使用至少1200px宽的浏览器查看页面的用户，给定容器的宽度可能为300px。但在768px宽的浏览器窗口中，同一容器可能只有180px宽

我正在寻找JavaScript（jQuery？）解决方案来加载适合容器宽度的最大广告格式

假设我有以下广告时段（广告格式）：

以下是我需要包含的脚本：

<script type="text/javascript"><!--
    google_ad_client   =  "ca-ABCDEFGH";
    google_ad_slot     =  "[###slot_id###]";
    google_ad_width    =   [###width###];
    google_ad_height   =   [###height###];
//--></script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>';

';

下面是一些示例html：

<body>
    <div class="row">
        <div class="span3"><p>Lorem ipsum</p></div>
        <div class="span3" id="adSlot1"><!-- [### INSERT AD 1 HERE ###] --></div>
        <div class="span3"><p>Lorem ipsum</p></div>
        <div class="span3"><p>Lorem ipsum</p></div>
    </div>
    <div class="row">
        <div class="span4" id="adSlot2"><!-- [### INSERT AD 2 HERE ###] --></div>
        <div class="span4"><p>Lorem ipsum</p></div>
        <div class="span4" id="adSlot3"><!-- [### INSERT AD 3 HERE ###] --></div>
    </div>
</body>


同侧眼睑
同侧眼睑
同侧眼睑
同侧眼睑

我想展示适合给定容器的最大广告槽

例如：

如果#adSlot1的宽度为300px，那么让我们显示

slot_300

（或者更确切地说是id:

3456789012

，以及它在AdSense JavaScript中的宽度和高度）

现在让我们假设您在另一台设备上查看页面，并且#adSlot1现在是480px宽。现在让我们使用

插槽336

。1000像素宽的元件？使用

插槽_728

。明白了吗

请注意，根据宽度的不同，呈现所有不同的插槽和仅呈现

.show（）

.hide（）

，这与Google的TOS是背道而驰的。相反，如果调用ad JavaScript，它必须在页面上可见。（想象一下，如果把隐藏的广告算作印象的话，这会把每个人的报道都搞砸！）

我也不太关心人们在查看页面时会拉伸和收缩他们的浏览器窗口。但如果有一个明智的答案，就可以获得额外的积分。在此之前，每页可以加载一次

您认为实现这一点的最佳、最优雅的方法是什么？

AdSense不支持流体宽度（我不知道），但您可以提供不同的大小取决于使用JavaScript的实际容器大小

看看这个：

编辑

如果您在上面的链接中解释您是如何使用该示例的，将会很有帮助

下面是一个更详细的jQuery插件示例，它在理论上应该可以工作

var google_ad_slot, google_ad_width, google_ad_height;
(function( $ ){
    $.fn.google_ads = function(slots) {
        /* Sort slots by width descending */
        slots.sort(function(a, b){
            var a1 = a[0], b1 = b[0];
            if(a1 == b1) return 0;
            return a1 > b1? -1: 1;
        });
        return this.each(function(){
            /* Get slot container width */
            var width = $(this).width();

            /* Find fitting slot */
            var slot = null;
            $.each(slots, function(){
                slot = this;
                if(width >= slot[0]){
                    return false;
                }
            });

            if( slot !== null ){
                /* Set global variables for external script */
                google_ad_slot = slot[2];
                google_ad_width = slot[0];
                google_ad_height = slot[1];

                /* Append script to slot container */
                var script_el = $('<script>', {
                    'type': 'text/javascript',
                    'src': 'http://pagead2.googlesyndication.com/pagead/show_ads.js'
                }).on('load', function() {
                    /* May need to wait with next slot until script is loaded */
                    console.log('loaded');
                });
                $(this).append(script_el);
            }

        });
    };
})( jQuery );

var谷歌广告槽、谷歌广告宽度、谷歌广告高度；
（函数（$）{
$.fn.google_ads=功能（插槽）{
/*按宽度降序排列插槽*/
插槽.排序（功能（a，b）{
变量a1=a[0]，b1=b[0]；
如果（a1==b1）返回0；
返回a1>b1？-1:1；
});
返回此值。每个（函数（）{
/*获取插槽容器宽度*/
var width=$（this.width（）；
/*查找装配槽*/
var slot=null；
$.each（插槽、函数（）{
槽=此；
如果（宽度>=插槽[0]）{
返回false；
}
});
如果（插槽！==null）{
/*为外部脚本设置全局变量*/
谷歌广告槽=槽[2]；
谷歌广告宽度=槽[0]；
谷歌广告高度=槽[1]；
/*将脚本附加到插槽容器*/
变量脚本_el=$（''{
'type'：'text/javascript'，
“src”：”http://pagead2.googlesyndication.com/pagead/show_ads.js'
}).on（'load'，function（））{
/*可能需要等待下一个插槽，直到加载脚本*/
console.log（'loaded'）；
});
$（this）.append（script_el）；
}
});
};
})（jQuery）；

示例用法 [宽度、高度、槽]

<h2>Slot 1</h2>
<div id="slot-1" class="slot" style="width:300px;"></div>
<h2>Slot 2</h2>
<div id="slot-2" class="slot" style="width:400px;"></div>
<script type="text/javascript">

var google_ad_client = "ca-pub-527527527527527";
$('.slot').google_ads([
    [180, 160, 1234567890],
    [250, 250, 2345678901],
    [300, 250, 3456789012],
    [336, 280, 4567890123],
    [728, 90, 5678901234]
]);

</script>

插槽1
插槽2
var google_ad_client=“ca-pub-527527527”；
$（'.slot'）。谷歌广告([
[180, 160, 1234567890],
[250, 250, 2345678901],
[300, 250, 3456789012],
[336, 280, 4567890123],
[728, 90, 5678901234]
]);

更可能（也更丑陋）的成功方式是：

<script type="text/javascript">
var get_google_ad_params = function(width, slots){

    /* Sort slots by width descending */
    slots.sort(function(a, b){
        var a1 = a[0], b1 = b[0];
        if(a1 == b1) return 0;
        return a1 > b1? -1: 1;
    });

    /* Find fitting slot */
    var slot = null;
    $.each(slots, function(){
        slot = this;
        if(width >= slot[0]){
            return false;
        }
    });
    return slot;
};

var slots = [
    [180, 160, 1234567890],
    [250, 250, 2345678901],
    [300, 250, 3456789012],
    [336, 280, 4567890123],
    [728, 90, 5678901234]
];
</script>

<h2>Slot 1</h2>
<div id="slot-1" class="slot" style="width:300px;">
    <script type="text/javascript">
    var params = get_google_ad_params($('#slot-1').width(), slots);
    var google_ad_slot = params[2];
    var google_ad_width = params[0];
    var google_ad_height = params[1];
    </script>
    <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</div>
<h2>Slot 2</h2>
<div id="slot-2" class="slot" style="width:400px;">
    <script type="text/javascript">
    var params = get_google_ad_params($('#slot-2').width(), slots);
    var google_ad_slot = params[2];
    var google_ad_width = params[0];
    var google_ad_height = params[1];
    </script>
    <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</div>


var get_google_ad_params=函数（宽度、插槽）{
/*按宽度降序排列插槽*/
插槽.排序（功能（a，b）{
变量a1=a[0]，b1=b[0]；
如果（a1==b1）返回0；
返回a1>b1？-1:1；
});
/*查找装配槽*/
var slot=null；
$.each（插槽、函数（）{
槽=此；
如果（宽度>=插槽[0]）{
返回false；
}
});
返回槽；
};
变量插槽=[
[180, 160, 1234567890],
[250, 250, 2345678901],
[300, 250, 3456789012],
[336, 280, 4567890123],
[728, 90, 5678901234]
];
插槽1
var params=get_google_ad_params（$（'#slot-1'）.width（），slots）；
var google_ad_slot=params[2]；
var google_ad_width=params[0]；
var google_ad_height=参数[1]；
插槽2
var params=get_google_ad_params（$（'#slot-2'）.width（），slots）；
var google_ad_slot=params[2]；
var google_ad_width=params[0]；
var google_ad_height=参数[1]；

这似乎有点初级，尤其是与Sunn0的答案相比，但是像这样简单的东西呢

function findAd(){
$('.adSlot').each(function(){
    var adSlotWidth = $(this).width();
    if(adSlotWidth >= 728){
        $(this).html(/* GOOGLE AD */);  
    } else if(adSlotWidth >= 336 && adSlotWidth <= 727){
        $(this).html(/* GOOGLE AD */);
    } else if(adSlotWidth >= 300 && adSlotWidth <= 335){
        $(this).html(/* GOOGLE AD */);
    } else if(adSlotWidth >= 250 && adSlotWidth <= 299){
        $(this).html(/* GOOGLE AD */);
    } else{
        $(this).html(/* GOOGLE AD */);
    }
});
}


$(document).ready(function(){

    findAd();
    $(window).resize(function(){
        findAd();   
    });

});

函数findAd（）{
$（'.adSlot'）。每个（函数（）{
var adSlotWidth=$（this）.width（）；
如果（adSlotWidth>=728）{
$（this.html（/*谷歌广告*/）；
}否则，如果（adSlotWidth>=336&&adSlotWidth=300&&adSlotWidth=250&&adSlotWidth，您应该能够调用sunn0的窗口调整插件，并使其在响应上工作。不过，您应该研究如何限制调整大小事件。这是一篇很好的文章
是的，这就是我在这里得到任何答案之前所做的。我现在仍然在实施它。我是ho
function findAd(){
$('.adSlot').each(function(){
    var adSlotWidth = $(this).width();
    if(adSlotWidth >= 728){
        $(this).html(/* GOOGLE AD */);  
    } else if(adSlotWidth >= 336 && adSlotWidth <= 727){
        $(this).html(/* GOOGLE AD */);
    } else if(adSlotWidth >= 300 && adSlotWidth <= 335){
        $(this).html(/* GOOGLE AD */);
    } else if(adSlotWidth >= 250 && adSlotWidth <= 299){
        $(this).html(/* GOOGLE AD */);
    } else{
        $(this).html(/* GOOGLE AD */);
    }
});
}


$(document).ready(function(){

    findAd();
    $(window).resize(function(){
        findAd();   
    });

});