如何更改屏幕宽度上的javascript广告来源库

我想将广告添加到我的网站。但广告公司不提供响应式解决方案。如何更改屏幕宽度上的javascript广告来源库

我得到的只是PC和手机的两个脚本源代码。

web 

728*90 
<script src="http://xxx_728_90&ad_type=banner"></script> 

mobiles 

320*50 
<script src="http://xxx_320_50&ad_type=banner"></script>

这将是好，如果我有两个版本的PC和手机，但我只有一个。我的问题是如何根据屏幕大小更改广告脚本源。

来源

2016-12-29 Vuong Tran

http://stackoverflow.com/questions/7715124/do-something-if-screen-width-is-less-than-960-px – Confused

使用窗口大小调整事件来改变文件的src元素 – magreenberg

您不一定必须将脚本实现为HTML。你可以脚本脚本！

要做到这一点，您需要一种机制来决定您是在台式机还是手机上运行。为了简单起见，我将使用screen对象，其中包含有关物理设备的有用数据。这种方法有点幼稚，考虑使用viewport和监听resize事件来响应窗口大小的变化（如果库可以容忍被重新加载）。

const isDesktop = screen.width > 700; 
const script = document.createElement('script'); 
script.src = 'http://xxx_' + (isDesktop ? '728_90' : '320_50') + '&ad_type=banner'; 
document.body.appendChild(script);

来源

2016-12-29 05:31:03

我得到了这个错误：未捕获DOMException：无法执行'节点'上的'appendChild'：文档中只允许有一个元素。 –

@VuongTran快速打字=错误。 :)我编辑了答案，再试一次。 –

另一个：net :: ERR_NAME_NOT_RESOLVED –

最后我找到了解决方案。

<script src="http://media.krxd.net/derek/postscribe.js"></script> 
<div class="container"> 
<div id="ad"></div> 
<script> 

// jQuery used as an example of delaying until load. 
    $(function() { 
    if ($(window).width() > 739) {  
    //Add your javascript for large screens here 
    var str='728_90'; 
} 
else { 
    //Add your javascript for small screens here 
    var str='320_100'; 
} 
    // Build url params and make the ad call 
    postscribe('#ad', '<script src=xxx'+str+'&ad_type=banner><\/script>'); 
    }); 

</script> 
</div>

来源

2016-12-29 07:26:27

如何更改屏幕宽度上的javascript广告来源库

回答

相关问题