在较小的屏幕上隐藏JavaScript
我正在设置自己的网站以进行响应，并且我想知道如何在屏幕尺寸小于700像素时隐藏我的即时聊天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);}
有人可以告诉我如何。 谢谢
这实际上可以很容易地用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添加到您的网站，只需将div包含在具有唯一ID或类的div标签中，并在CSS中使用上述内容。
编辑：
看到您的网站后，我认为我有一个可以正常工作的解决方案：
@media screen and (max-width: 700px) {
.wsa_window, .wsa_window_close { display: none !important; }
}
'！important'需要覆盖javascript直接放在元素上的样式，但在检查器中这样做似乎没有删除页面上的任何其他内容。
希望这可以帮助！
检查一下它会帮助你。 使用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');
});
我也不确定你是如何将你的聊天添加到你的页面的，但是如果你有一个div标签，你可以在较小的屏幕上隐藏该div。
你可以用像这个jsFiddle这样的脚本来做到这一点，但我认为在Oceanity的回答中使用CSS媒体查询更好。
在小提琴中，您可以通过改变中央手柄的输出部分的大小来轻松测试它。
（在演示中将尺寸设置为400px，以便于在jsFiddle中进行测试。）
为了检查大小，我使用了这个SO问题的脚本。 我正在做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>