繁体   English   中英

根据屏幕大小禁用javascript

[英]Disable javascript based on screen size

好的,所以这可能没有可能,但我认为是,我对此完全是新的,所以我试过的东西显然不会起作用,但我当时不知道。 我的网站移动响应,没有针对移动网站的单独网页,因此将代码单独放入页面也不起作用。

我试过了:

<style>
@media screen and (max-width: 720px) {
#div {
display:none;
  }
}
</style>

<div id="div">
<script type="text/javascript"> 
  var adfly_id = ID; 
  var popunder_frequency_delay = 0; 
</script> 
<script src="https://cdn.adf.ly/js/display.js"></script>
</div>

哪个没用。 我在这里的某个地方见过这段代码

if(screen.width < 720) { 
    // do any 720 width stuff here, or simply do nothing
    return;
} else {
    // do all your cool stuff here for larger screens
}

但我不知道如何将adfly代码放入其中。

编辑:

感谢那些回复的人,我得知Praveen Kumar的回答是有效的,但奇怪的是它仍然会在桌面上加载广告而不管它在手机上的完美分辨率...... Siguza我会给你的,所以人们知道未来参考。 然后我会再次编辑......

编辑二:

为了将来参考,Siguza的方法也适用,所以如果其他人偶然发现这个,那么你可以拍摄你的照片。 Praveen Kumar方法也适用于最短的广告,对于任何可能使用它们而不是adfly的人来说都是我使用的。

<script type="text/javascript">
if(screen.width < 720) { 
  var adfly_id = null; 
  var popunder_frequency_delay = null;
} else {
  // do all your cool stuff here for larger screens
    var adfly_id = ID; 
    var popunder_frequency_delay = 0;
}
      </script>
<script src="https://cdn.adf.ly/js/display.js"></script>
<script type="text/javascript">
if(screen.width < 720) { 
//screens bigger than 720
} else {
//shortest advertisement code                        
}
</script> 

替换此行:

<script src="https://cdn.adf.ly/js/display.js"></script>

有了这个:

<script>
if(screen.width >= 720) {
    document.head.appendChild(document.createElement('script')).src = 'https://cdn.adf.ly/js/display.js';
}
</script>

这将只创建一个<script>标记,将其src属性设置为https://cdn.adf.ly/js/display.js ,并将其添加到文档的<head>标记中。
只是在JavaScript而不是纯HTML。

请注意,我在这里依赖于HTML 5,但您在问题中也是如此( <script><style>不需要type属性)。

编辑:

这种方法似乎在使用document.write脚本上失败(IMO,这是一种不好的做法)。
你可以自己使用document.write来解决这个问题:

<script>
/* you can put your adfly_id code right here */
if(screen.width >= 720) {
    document.write('<script src="https://cdn.adf.ly/js/display.js"><'+'/script>');
}
</script>

请注意,您必须在字符串中拆分</script>标记,否则它将关闭周围的脚本标记,从而导致语法错误。

可能是一个黑客工作。 如果仅当您拥有有效的adfly_id时才有效,请执行以下操作:

if(screen.width < 720) { 
  var adfly_id = null; 
  var popunder_frequency_delay = null;
} else {
  // do all your cool stuff here for larger screens
  var adfly_id = ID; 
  var popunder_frequency_delay = 0; 
}

这可能会使您尝试初始化的adfly内容失败。

但正确的方法是:

if(screen.width < 720) { 
  // Bye bye.
} else {
  // do all your cool stuff here for larger screens
  require("awesome.js");
}

ps:这里的require()函数是一个包含并激活JavaScript文件的伪函数。 该代码的示例将是:

function loadScript(url, callback) {
    // Adding the script tag to the head as suggested before
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;

    // Then bind the event to the callback function.
    // There are several events for cross browser compatibility.
    script.onreadystatechange = callback;
    script.onload = callback;

    // Fire the loading
    head.appendChild(script);
}

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM