关于jquery：在较小的屏幕上隐藏JavaScript


Hide JavaScript at a smaller screen

我正在设置我的网站来响应，我想知道当屏幕大小小于700px时如何隐藏我的LiveChat JavaScript。

我当前的LiveChat javascript是

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function wsa_include_js(){

var wsa_host = (("https:" == document.location.protocol) ?"https://" :"http://");

var js = document.createElement("script");

js.setAttribute("language","javascript");

js.setAttribute("type","text/javascript");

js.setAttribute("src",wsa_host +"tracking-v3.websitealive.com/3.0/?objectref=wsa3&groupid=12581&websiteid=0");

document.getElementsByTagName("head").item(0).appendChild(js);

}

if (window.attachEvent) {window.attachEvent("onload", wsa_include_js);}

else if (window.addEventListener) {window.addEventListener("load", wsa_include_js, false);}

else {document.addEventListener("load", wsa_include_js, false);}

有人能告诉我怎么做吗？谢谢

这实际上可以通过CSS媒体查询很容易地解决，但是我需要知道如何将LiveChat添加到HTML中，以便给您一个好的答案。

您要做的是获取保存聊天窗口的DIV的类或ID，并将以下内容添加到您的CSS文件中：

1
2
3
@media screen and (max-width: 700px) {
    #LiveChatContainerID { display: none; }
}

或

1
2
3
@media screen and (max-width: 700px) {
    .LiveChatContainerClass { display: none; }
}

如果LiveChat要求您向站点添加一个iframe，只需用一个唯一的ID或类将iframe包装在DIV标记中，并在CSS中使用上述内容。

编辑：

在看到你的网站后，我想我有一个很好的解决方案：

1
2
3
@media screen and (max-width: 700px) {
    .wsa_window, .wsa_window_close { display: none !important; }
}

"！"重要"是需要覆盖javascript直接在元素上放置的样式，但是在inspector中这样做似乎可以在不删除页面上任何其他内容的情况下正常工作。

希望这有帮助！

相关讨论

我也不确定你是如何将聊天添加到你的页面中的，但是如果你把它放在一个DIV标签中，你可以在更小的屏幕上隐藏它。

您可以使用类似于这个jsiddle的脚本来完成这项工作，但我认为最好使用CSS媒体查询作为Oceanity的答案。

在小提琴中，你可以很容易地通过改变输出部分的大小来测试它，手柄在中间。

(为了在jsFiddle中更容易测试，在演示中将大小设置为400px。)

为了检查大小，我使用了这个问题的脚本。我正在检查onload和onresize事件的大小。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
function getViewPortSize()
{ // source code form here https://stackoverflow.com/questions/10653019/how-to-find-the-screen-width-and-apply-it-to-a-particular-css
    var viewportwidth;
    var viewportheight;

    // Standard browsers
    if (typeof window.innerWidth != 'undefined')
    {
        viewportwidth = window.innerWidth,
        viewportheight = window.innerHeight
    }

    // IE6
    else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0)
    {
        viewportwidth = document.documentElement.clientWidth,
        viewportheight = document.documentElement.clientHeight
    }

    //Older IE
    else
    {
        viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
        viewportheight = document.getElementsByTagName('body')[0].clientHeight
    }

    return { width: viewportwidth, height: viewportheight};
}

var hideChat = function(evt) {
    console.log(getViewPortSize().width);
    if ( getViewPortSize().width < 400) {
        //console.log('hide div now');
        document.getElementById('chatArea').style = 'display: none';
    }
    else {
        document.getElementById('chatArea').style = 'display: block';
    }
};

window.onresize = function(evt) {
    console.log(evt);
    hideChat(evt);
};

window.onload = function(evt) {
    console.log(evt);
    hideChat(evt);
};
1
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,

看看这个，它会帮你的。用JFiddle很容易

这个特定的代码会随着大小的变化而改变颜色，因此您可以根据自己的目的简单地对其进行重构。在代码编辑器中测试您要实现的目标，并查看结果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
function red() {
$('div').css('background','#B60C0C')
.text('Screen Size RED');
}

function orange() {
$('div').css('background','#EBAE10')
.text('Screen Size ORANGE');
}

function green() {
$('div').css('background','#83ba2b')
.text('Screen Size GREEN');
}

var bounds = [
{min:0,max:500,func:red},
{min:501,max:850,func:orange},
{min:851,func:green}
];

var resizeFn = function(){
var lastBoundry; // cache the last boundry used
return function(){
    var width = window.innerWidth;
    var boundry, min, max;
    for(var i=0; i<bounds.length; i++){
        boundry = bounds[i];
        min = boundry.min || Number.MIN_VALUE;
        max = boundry.max || Number.MAX_VALUE;
        if(width > min && width < max
           && lastBoundry !== boundry){
            lastBoundry = boundry;
            return boundry.func.call(boundry);            
        }
    }
}
};
$(window).resize(resizeFn());
$(document).ready(function(){
$(window).trigger('resize');
});
相关讨论