如何更改屏幕寬度上的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廣告來源庫

回答

相關問題