2016-12-29 4 views
0

Ich möchte Werbung auf meiner Website hinzufügen. Aber die Anzeigenfirma bietet keine reaktionsfähige Lösung.Wie JavaScript-Werbung Quellbasis auf Bildschirmbreite ändern

Alles, was ich bekam, waren zwei Skriptquellen für PC und Mobile.

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> 

Es wird in Ordnung sein, wenn ich zwei Versionen für PC und Handy habe, aber ich habe nur eine. Meine Frage ist, wie Sie die Basisgröße des Anzeigenskripts auf der Bildschirmgröße ändern.

+0

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

+0

das Fenster Resize-Ereignis verwenden, um die src des Dokuments zu ändern Element – magreenberg

Antwort

0

Sie müssen das Skript nicht unbedingt als HTML implementieren. Sie können Ihre Skripte skripten!

Dazu benötigen Sie einen Mechanismus, um zu entscheiden, ob Sie auf einem Desktop oder Handy laufen. Zur Vereinfachung verwende ich das Objekt screen, das nützliche Daten zum physischen Gerät enthält. Dieser Ansatz ist ein bisschen naiv. Ziehen Sie in Erwägung, die Ereignisse viewport zu verwenden und auf die Ereignisse resize zu hören, um auf Änderungen der Fenstergröße zu reagieren (wenn die Bibliothek ein erneutes Laden tolerieren kann).

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); 
+0

Ich habe diesen Fehler: Uncaught DOMException: Fehler beim Ausführen von "appendChild" auf "Node": Nur ein Element im Dokument erlaubt. –

+0

@VuongTran Schnelle Eingabe = Fehler. :) Ich habe die Antwort bearbeitet und versuche es erneut. –

+0

ein anderes: net :: ERR_NAME_NOT_RESOLVED –

0

Endlich fand ich die Lösung.

<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> 
Verwandte Themen