Question

我正在设置我的网站以提供响应，并且我想知道如何在屏幕尺寸小于700px时隐藏我的实时聊天JavaScript。

我目前的实时聊天JavaScript是





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);}

有人可以告诉我如何。感谢

Answer 1

使用CSS媒体查询可以很容易地解决这个问题，但是我需要知道如何将LiveChat添加到HTML中以便给出一个好的答案。

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

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

或

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

如果LiveChat要求您向网站添加iframe，只需将iframe包装在具有唯一ID或类的div标记中，然后在CSS中使用上述内容。

修改

在看到您的网站后，我认为我有一个可行的解决方案：

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

需要'！important'来覆盖javascript直接放在元素上的样式，但是在检查器中执行此操作似乎工作正常而不删除页面上的任何其他内容。

希望这有帮助！

Answer 2

检查一下它会对你有所帮助。 Its easy with JFiddle

此特定代码会根据尺寸变化更改颜色，因此您可以根据需要对其进行重组。在代码编辑器中测试您想要实现的目标并查看结果。

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');
});

Answer 3

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

您可以使用此jsFiddle中的脚本执行此操作，但我认为最好使用CSS媒体查询，因为Oceanity已回答。

在小提琴中，你可以通过改变输出部分的大小来轻松测试它，手柄位于中心。

（在演示中将大小设置为400px，以便在jsFiddle中进行更轻松的测试。）

为了检查尺寸，我使用了这个SO question的脚本。我在onload - 和onresize事件中进行大小检查。

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);
};

<div id="chatArea">
    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,
</div>

在较小的屏幕上隐藏JavaScript

3 个答案: