javascript 的一些小知识应用点

56 阅读 0 评论 37 点赞

我是靠谱客的博主神勇大树，最近开发中收集的这篇文章主要介绍javascript 的一些小知识应用点，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

一、判断是否是微信浏览器

var wx= (function(){
    return navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1
}
)();
if(wx){
    alert("是微信");
}else {
    alert("不是微信");
}

二、手机浏览器打开微信app

// 安卓：

var state = null;
try {
  if (scheme != '') {
    openIframe.src = '【scheme】://【host】/【openwith】';
  }
} catch (e) { }

if (state) {
  window.close();
} else {
  location.href='下载地址';   
}

// 苹果：

if (scheme != '') {
  window.location.href = '【scheme】://';
}

// a标签：
<a href="weixin://" class="gowx" id="gowxtext">复制好了 添加好友 </a>

三、字符串转换为数字

js提供了parseInt()和parseFloat()两个转换函数。前者把值转换成整数，后者把值转换成浮点数。只有对String类型调用这些方法，这两个函数才能正确运行；对其他类型返回的都是NaN(Not a Number)。

一些示例如下：

parseInt("1234blue"); //returns 1234
parseInt("0xA"); //returns 10
parseInt("22.5"); //returns 22
parseInt("blue"); //returns NaN

parseInt()方法还有基模式，可以把二进制、八进制、十六进制或其他任何进制的字符串转换成整数。基是由parseInt()方法的第二个参数指定的，示例如下：

parseInt("AF", 16); //returns 175
parseInt("10", 2); //returns 2
parseInt("10", 8); //returns 8
parseInt("10", 10); //returns 10

如果十进制数包含前导0，那么最好采用基数10，这样才不会意外地得到八进制的值。例如：

parseInt("010"); //returns 8
parseInt("010", 8); //returns 8
parseInt("010", 10); //returns 10

parseFloat()方法与parseInt()方法的处理方式相似；使用parseFloat()方法的另一不同之处在于，字符串必须以十进制形式表示浮点数，parseFloat()没有基模式。

下面是使用parseFloat()方法的示例：

parseFloat("1234blue"); //returns 1234.0
parseFloat("0xA"); //returns NaN
parseFloat("22.5"); //returns 22.5
parseFloat("22.34.5"); //returns 22.34
parseFloat("0908"); //returns 908
parseFloat("blue"); //returns NaN

四、判断浏览器窗口大小

(function (doc, win) {
	var docEl = doc.documentElement,
        // orientationchange事件是苹果safari使用。
	resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
	recalc = function () {
		var clientWidth = docEl.clientWidth;
			if (!clientWidth) return;
			if (clientWidth > 750) { clientWidth = 750; }
			docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
		};

		if (!doc.addEventListener) return;
		win.addEventListener(resizeEvt, recalc, false);
		doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

1、onload事件

onload事件所有的浏览器都支持，所以我们不需要什么兼容，只要通过调用

window.onload = function(){
    
}

2、DOMContentLoaded 事件

DOMContentLoaded不同的浏览器对其支持不同，所以在实现的时候需要做不同浏览器的兼容。

1）支持DOMContentLoaded事件的，就使用DOMContentLoaded事件；

2）IE6、IE7不支持DOMContentLoaded，但它支持onreadystatechange事件，该事件的目的是提供与文档或元素的加载状态有关的信息。

3) 更低的ie还有个特有的方法doScroll，通过间隔调用：document.documentElement.doScroll("left");

可以检测DOM是否加载完成，当页面未加载完成时，该方法会报错，直到doScroll不再报错时，就代表DOM加载完成了。该方法更接近DOMContentLoaded的实现。

function ready(fn){

    if(document.addEventListener) {
        document.addEventListener('DOMContentLoaded', function() {
            document.removeEventListener('DOMContentLoaded',arguments.callee, false);
            fn();
        }, false);
    } 

    // 如果IE
    else if(document.attachEvent) {
        // 确保当页面是在iframe中加载时，事件依旧会被安全触发
        document.attachEvent('onreadystatechange', function() {
            if(document.readyState == 'complete') {
                document.detachEvent('onreadystatechange', arguments.callee);
                fn();
            }
        });

        // 如果是IE且页面不在iframe中时，轮询调用doScroll 方法检测DOM是否加载完毕
        if(document.documentElement.doScroll && typeof window.frameElement === "undefined") {
            try{
                document.documentElement.doScroll('left');
            }
            catch(error){
                return setTimeout(arguments.callee, 20);
            };
            fn();
        }
    }
};