Question

我有一个javascript代码，可以在我的网站左侧呈现一个粘性标签。如果用户共享页面等，则会弹出一个提供优惠券的框...

唯一的问题是，这在移动浏览器上非常突兀，因此我想确保此脚本不会在移动平台上加载。

以下代码调用以下js代码：

<script type="text/javascript">
    var headID = document.getElementsByTagName("head")[0];
    var newScript = document.createElement('script');
    newScript.type = 'text/javascript';
    var t = ''; if (document.cookie.indexOf("iscm=1") != -1) { var d = new Date(); t = '&t=' + d.getTime(); }
    newScript.src = '//www.MYDOMAIN.com/coupon.js' + t;
    headID.appendChild(newScript);
</script>
<div id="share-coupon-small"></div>

我对javascript没什么经验，所以如果有人能帮我完成这段代码，我会非常感激。

Answer 1

根据窗口大小将其包装在if语句中。

var limit = 600;          
if(window.innerWidth>limit){
  //do  
}

使用您的代码：

var limit = 600;
var window_width = window.innerWidth;

if(window_width>limit){
    var headID = document.getElementsByTagName("head")[0];
    var newScript = document.createElement('script');
    newScript.type = 'text/javascript';
    var t = ''; 
    if(document.cookie.indexOf("iscm=1") != -1) { 
      var d = new Date(); t = '&t=' + d.getTime(); 
    }
    newScript.src = 'http//www.sugarskulluk.com/coupon.js' + t;
    headID.appendChild(newScript);

    document.write("<div id=\"share-coupon-small\"></div>");
}//end of if window_width>limit

Answer 2

为了测试设备是平板电脑，手机还是台式机，我可能更倾向于使用用户代理。

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
 // some code..
}

Answer 3

非JS方法是使用媒体查询（在<style>元素或CSS文件中）隐藏小屏幕上的share-coupon-small元素：

@media only screen and (max-width: 600px), only screen and (max-device-width: 600px) {
    #share-coupon-small { display: none; }
}

停止我在手机上的javascript加载

3 个答案: