项目总结

饥人谷_李栋

1.阻止input表单自动填充
2.离开或刷新页面 js跳出弹框
3.导航栏下拉菜单点击div 不消失，点击document div 消失
4.跳转到指定的邮箱登录页面
5.页面中iframe内容相互调用
6.select 实现多选change监听
7.移动端访问pc页面自动跳转
8.IOS把数字渲染为电话号码，颜色为蓝色

一、阻止input表单自动填充

input添加属性autocomplete="off" // chrome和firefox不兼容
如果同时有usename+password的话可以改变password 的type值为text 当获得焦点的时候改为password
为了确保效果最好监听focus事件

二、离开或刷新页面 js跳出弹框

window.onbeforeunload = function(event) {
  event.returnValue="已自动保存"+datae+"时的内容";
}

不提示

 window.onbeforeunload = function(event) {
   return;
}

三、点击div 不消失，点击document div 消失

    <div style="position:relative">
          <input type="button" value="asljdlaskjdf">
          <ul style="position:absolute; top:20px; left:0px; border:1px solid red; height:100px; overflow:scroll;overflow-x:hidden; display:none">
              <li>123312312</li>
              <li><label><input type="radio" name="asdf" id="">asdfasdfadfasdf</label></li>
              <li><label><input type="radio" name="asdf" id="">asdfasdfadfasdf</label></li>
              <li><input type="button" value="aaaa"></li>
          </ul>
    </div>
    <script type="text/javascript">
    $(function(){

        $("ul,input").click(function(e){
           console.log(e)
            e?e.stopPropagation():event.cancelBubble = true;
        });

        $("input").focus(function() {
        $("ul").show();

        });
        $(document).click(function() {
            $("ul").hide();

        });
    })
    </script>

四、跳转到指定的邮箱登录页面

    $("#gomail").click(function () {
        //var uurl = $("input.hide_email").val();
        //获得哈希值
        var hashStrings = (window.location.hash.length > 0 ? window.location.hash.slice(1) : "");
        var uurl = gotoEmail(hashStrings);
        if (uurl != "") {
            window.open("http://"+uurl);
        } else {
            console.log("抱歉!未找到对应的邮箱登录地址，请自己登录邮箱查看邮件！");
        }
    });

    //功能：根据用户输入的Email跳转到相应的电子邮箱首页
    function gotoEmail($mail) {
        $t = $mail.split('@')[1];
        $t = $t.toLowerCase();
        if ($t == '163.com') {
            return 'mail.163.com';
        } else if ($t == 'vip.163.com') {
            return 'vip.163.com';
        } else if ($t == '126.com') {
            return 'mail.126.com';
        } else if ($t == 'qq.com' || $t == 'vip.qq.com' || $t == 'foxmail.com') {
            return 'mail.qq.com';
        } else if ($t == 'gmail.com') {
            return 'mail.google.com';
        } else if ($t == 'sohu.com') {
            return 'mail.sohu.com';
        } else if ($t == 'tom.com') {
            return 'mail.tom.com';
        } else if ($t == 'vip.sina.com') {
            return 'vip.sina.com';
        } else if ($t == 'sina.com.cn' || $t == 'sina.com') {
            return 'mail.sina.com.cn';
        } else if ($t == 'tom.com') {
            return 'mail.tom.com';
        } else if ($t == 'yahoo.com.cn' || $t == 'yahoo.cn') {
            return 'mail.cn.yahoo.com';
        } else if ($t == 'tom.com') {
            return 'mail.tom.com';
        } else if ($t == 'yeah.net') {
            return 'www.yeah.net';
        } else if ($t == '21cn.com') {
            return 'mail.21cn.com';
        } else if ($t == 'hotmail.com') {
            return 'www.hotmail.com';
        } else if ($t == 'sogou.com') {
            return 'mail.sogou.com';
        } else if ($t == '188.com') {
            return 'www.188.com';
        } else if ($t == '139.com') {
            return 'mail.10086.cn';
        } else if ($t == '189.cn') {
            return 'webmail15.189.cn/webmail';
        } else if ($t == 'wo.com.cn') {
            return 'mail.wo.com.cn/smsmail';
        } else if ($t == '139.com') {
            return 'mail.10086.cn';
        } else {
            return '';
        }
    }

五、页面中iframe内容相互调用

父页面调用子页面

 $("#iframe1").contents().find('.ws-opens').hide();

子页面调用父页面

   parent.document.getElementById("iframe1").style.height = "1960px";

点击iframe里的元素，父元素弹窗

 在父页面里放弹窗的DOM结构 以及可以调用弹窗的函数function a,
子页面的元素监听事件来调用父元素的函数 parent.a()

注：这里需要注意的是，最好调用的目标有一个id值，链式操作不支持

六、select 实现多选change监听

这里我用了一个比较笨的方法
amazeUI 的多选组件
因为位置比较挤，没有确当按钮的位置
我的思路是：过2s后判断select的value值是不是相等；
在写延迟执行的时候，由于setTimeout函数不支持值传入，网上一堆方法，都无法实现，用的全局的变量来存放value，当然欢迎有过同样需求的童鞋指正..

var other, values,num = 0;
  function foo() { 
   //console.log(Boolean(other)); 
   //console.log(Boolean(values));  
   if(Boolean(other)){ 
      other=other.toString();
    }   //数组比较es5需要toString()，而null没有toString方法
   if(Boolean(values)){    
      values.toString(); 
    }  
   if (other == values) {   
     .... }
 }
 $("#table select").on("change", function () { 
     if (num == 0) {    
        values = $(this).val();num++
     } 
     var time = setTimeout(function () {   
        other = $("#table select").val(); 
     foo();       
     num = 0}, 2000);});

七、移动端访问pc页面自动跳转

!(function(){
        if(navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)){
            console.log(2);
            var hash=window.location.hash;
            window.location.href = 'index_mobile.html'+hash;
        } else { console.log(" PC页面")}
    })();

八、IOS把数字渲染为电话号码，颜色为蓝色

head中添加meta

<meta name="format-detection" content="telephone=no">