使用jQuery将Javascript代码插入DIV

时间:2012-04-11 18:34:11

标签: javascript jquery html dom responsive-design

好的,所以我正在开发一个快速响应的网站,我正试图以最好的方式处理Adsense,这不会让我被禁止!我想做的是仅当浏览器宽度小于533px时才使用jQuery添加我的Adsense代码。通过这种方式,我可以显示较小的广告,以适应窗口并且不会破坏布局。我在添加Adsense javascript时遇到了一些麻烦。这有效:

(function($){
//detect the width on page load
$(document).ready(function(){
var current_width = $(window).width();
//do something with the width value here!
if(current_width < 533){
        $('.ads').prepend("THIS IS WHERE I WANT THE ADSENSE CODE TO GO");
}
});

但是,当我包含我的Adsense代码来替换这就是我想要去的ADSENSE,它没有。这是Adsense代码:

<script type="text/javascript"><!--
google_ad_client = "ca-pub-1234567890";
/* Test Ad */
google_ad_slot = "1234567890";
google_ad_width = 250;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

我还尝试将Adsense javascript代码包含在.html文件中,并使用jQuery.get和jQuery.getScript作为.html和.js文件。我无法让它发挥作用。

我可以通过简单的PHP标头检测来实现,但我希望广告根据宽度而不是设备类型显示。

有人知道如何做到这一点吗?

(转贴为对上一个问题没有回复)

3 个答案:

答案 0 :(得分:1)

我不确定这是否有效,但值得一试:

/* these should be global */
google_ad_client = "ca-pub-1234567890";
/* Test Ad */
google_ad_slot = "1234567890";
google_ad_width = 250;
google_ad_height = 250;

$(function(){
    //detect the width on page load
    var current_width = $(window).width();
    //do something with the width value here!
    if(current_width < 533){
        $.getScript('http://pagead2.googlesyndication.com/pagead/show_ads.js');
    }
});

答案 1 :(得分:0)

您是否尝试过这样的外部.js?

   var script = document.createElement('script');
   script.src = 'http://pagead2.googlesyndication.com/pagead/show_ads.js';
   script.type = 'text/javascript';
   var head = document.getElementsByTagName("head")[0];
   head.appendChild(script);

答案 2 :(得分:0)

您面临的问题是Google并不真正支持AdSense ajax。包含adsense代码的常规方法是使用其所在页面的URL来呈现正确的内容。

现在,假设您可以将adsense代码缩减为特定的网址。你可以这样做:

// note, this url is just a suggestion, not something that will likely work 

var url = 'http://pagead2.googlesyndication.com/pagead/ads?client=ca-pub-1234567890&ad_slot=1234567890&ad_width=250&ad_height=250';

var adsContainer = $('.ads');  // though, if there's only one, use id, not class

$.ajax({
type:'GET',
    url:url,
    async:true,
    success:function(html) {
        adsContainer.html(html);
        return false;
    },
    error: function(html) {
      adsContainer.html('SOME DEFAULT AD MESSAGE');
      return false;
    } 
});

但我认为这几乎可以说是让你遇到麻烦的事情。

Google曾经有一个adsense ajax计划:

https://developers.google.com/adsense-for-ajax/

但它现在“不可用”。你不能把你的代码放在你自己的服务器上的外部.html或.php文件和ajax的原因是javascript不会被客户端的引擎通过ajax调用执行。您正在将原始javascript注入已经由javascript引擎解释的页面。

您是否可以使用node.js或某种服务器端javascript解析器来提供.html文件?也许吧,但解决这个问题还有很多。

我的建议是:包含多个较小的广告,如果堆放在大页面上会看起来很好,或者如果在一个小页面上拼凑在一起就会平铺。