js – 禁止复制和粘贴、另存为

js – 禁止复制和粘贴、另存为

使右键和复制失效

方法1

<script language="Javascript"> document.oncontextmenu=new Function("event.returnValue=false"); document.onselectstart=new Function("event.returnValue=false");  
</script>

阅读详细 »

大数据可视化自适应屏幕尺寸

大数据可视化自适应屏幕尺寸

// JavaScript Document
function resize_win(){
var win_w = $(window).width(),
win_h = $(window).height();
var ratioX = win_w / 1920,
ratioY = win_h / 1080;
//ratioY = ratioX;
$('body').css({
          transform: "scale(" + ratioX + ", " + ratioY + ")",
          transformOrigin: "left top",
          /*backgroundSize: "100% " + ratioY * 100 + "%",*/
});
//$('html,body').css('overflow','hidden');
}

$(function(){
$(window).resize(function(){
resize_win();
}).resize();   
});

带复选框的下拉框chartQuota

阅读详细 »

js将url查询字符串转换为json数据

js将url查询字符串转换为json数据

function query2Hash(queryStr) {
    var h = {};
    console.log(window.location.search);
    var qArr = (queryStr || window.location.search.replace(/\?/, '')).split('&');
    for (var i = 0,
    len = qArr.length; i < len; i += 1) {
        var kvArr = qArr[i].split('=');
        h[kvArr[0]] = kvArr[1];
    }
    return h;
}

事件DOMContentLoaded和load的区别

事件DOMContentLoaded和load的区别

他们的区别是，触发的时机不一样，先触发DOMContentLoaded事件，后触发load事件。

DOM文档加载的步骤为

1. 解析HTML结构。
2. 加载外部脚本和样式表文件。
3. 解析并执行脚本代码。
4. DOM树构建完成。//DOMContentLoaded   //jQuery.ready
5. 加载图片等外部文件。
6. 页面加载完毕。//load

在第4步，会触发DOMContentLoaded事件。在第6步，触发load事件。

用原生js可以这么写

// 不兼容老的浏览器，兼容写法见[jQuery中ready与load事件](http://www.imooc.com/code/3253)，或用jQuery
document.addEventListener("DOMContentLoaded", function() {
   // ...代码...
}, false);

window.addEventListener("load", function() {
    // ...代码...
}, false);

用jQuery这么写

// DOMContentLoaded
$(document).ready(function() {
    // ...代码...
});

//load  
$(document).load(function() {
    // ...代码...
});
//貌似1.8版本之后,load就抛弃了.只能用window.onload()或者addEventListener这两个事件监听页面加载完成

设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的js代码

// 设置为主页 
//<a href="javascript:void(0)" onclick="SetHome(this,window.location)">设为首页</a>
function SetHome(obj, vrl) {
    try {
        obj.style.behavior = 'url(#default#homepage)';
        obj.setHomePage(vrl);
    } catch(e) {
        if (window.netscape) {
            try {
                netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
            } catch(e) {
                alert("此操作被浏览器拒绝！\n请在浏览器地址栏输入“about:config”并回车\n然后将 [signed.applets.codebase_principal_support]的值设置为'true',双击即可。");
            }
            var prefs = Components.classes['@mozilla.org/preferences-service;1'].getService(Components.interfaces.nsIPrefBranch);
            prefs.setCharPref('browser.startup.homepage', vrl);
        } else {
            alert("您的浏览器不支持，请按照下面步骤操作：1.打开浏览器设置。2.点击设置网页。3.输入：" + vrl + "点击确定。");
        }
    }
}
// 加入收藏 兼容360和IE6
//<a href="javascript:void(0)" onclick="shoucang(document.title,window.location)">加入收藏</a>
function shoucang(sTitle, sURL) {
    try {
        window.external.addFavorite(sURL, sTitle);
    } catch(e) {
        try {
            window.sidebar.addPanel(sTitle, sURL, "");
        } catch(e) {
            alert("加入收藏失败，请使用Ctrl+D进行添加");
        }
    }
}

js判断是否在iframe和禁止网页在iframe中显示

js判断是否在iframe和禁止网页在iframe中显示

如果也没在frame框架中打开，则在顶层窗口中打开啊

<script type="text/javascript">
    if (self != top) { top.location.href=location.href; } 
</script>

js判断在iframe里：

//方式一    
if (self.frameElement && self.frameElement.tagName == "IFRAME") {    
         alert('在iframe中');    
}    
//方式二    
if (window.frames.length != parent.frames.length) {    
         alert('在iframe中');    
}    
//方式三    
if (self != top) {      
         alert('在iframe中');    
}  

防止网页被别站用iframe引用：

通过js防止：

//方式一    
if (self.frameElement && self.frameElement.tagName == "IFRAME") {    
         location.href="about:blank";   
}    
//方式二    
if (window.frames.length != parent.frames.length) {    
         location.href="about:blank";  
}    
//方式三    
if (self != top) {      
         location.href="about:blank";   
}

通过header配置防止：
php配置：

header("X-Frame-Options:deny");  
header("X-Frame-Options:SAMEORIGIN");  

Nginx配置：

add_header X-Frame-Options SAMEORIGIN  

Apache配置：

Header always append X-Fram-Options SAMEORIGIN  

IIS配置：

X-Frame-Options：
DENY：禁止当前页面放在IFrame内
SAMEORIGIN：在同源情况下可以使用IFrame内
ALLOW-FROM http://a.com/：在a.com的域名内可以使用Iframe

通过meta设置：

<meta http-equiv="X-Frame-Options" content="deny">  

js时间格式化函数，js秒数转日期时间格式字符串

js时间格式化函数，js秒数转日期时间格式字符串

//调用方法
//日期字符串 -> 日期字符串 （重新格式化日期时间）
alert(new Date(Date.parse(‘2016-12-12 12:12:12’)).Format(“yyyy-MM-dd hh:mm:ss”));
//时间戳（秒数） -> 日期字符串 （秒数转格式化日期时间 记得 * 1000）
alert(new Date(1479132772*1000).Format(“yyyy-MM-dd hh:mm:ss”));
//当前时间 -> 日期字符串 
alert(new Date().format(“yyyy-MM-dd hh:mm:ss”));

Date.prototype.Format = function(fmt) { //author: meizz
    var o = {
        "M+": this.getMonth() + 1,
        //月份
        "d+": this.getDate(),
        //日
        "h+": this.getHours(),
        //小时
        "m+": this.getMinutes(),
        //分
        "s+": this.getSeconds(),
        //秒
        "q+": Math.floor((this.getMonth() + 3) / 3),
        //季度
        "S": this.getMilliseconds() //毫秒
    };
    if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    }
    for (var k in o) {
        if (new RegExp("(" + k + ")").test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        }
    }
    return fmt;
};

//调用方法
//日期字符串 -> 日期字符串 （重新格式化日期时间）
alert(new Date(Date.parse('2016-12-12 12:12:12')).Format("yyyy-MM-dd hh:mm:ss"));
//时间戳（秒数） -> 日期字符串 （秒数转格式化日期时间 记得 * 1000）
alert(new Date(1479132772 * 1000).Format("yyyy-MM-dd hh:mm:ss"));
//当前时间 -> 日期字符串 
alert(new Date().format("yyyy-MM-dd hh:mm:ss"));

IE的@cc_on条件编译

IE的@cc_on条件编译
用来判断浏览器的版本很好用 var b = /*@cc_on!@*/false;
其中/*@cc_on ….. @*/之间的部分可以被ie识别并作为程序执行，同时启用ie的条件编译。 最常用的变量是@_jscript_version：js版本，最后一位是ie主版本号
例如：

<script>
   var sSuffix = ( /*@cc_on!@*/false ) ? 'ie' : '非iE浏览器' ;
    /*@cc_on alert("显示浏览器版本号:"+@_jscript_version) @*/
    alert("浏览器版本为"+sSuffix)
</script>

用于