Skip to content

A
about_fe

GitCode / about_fe

通知 0
Star 2
Fork 0
A
about_fe
切换分支/标签
查找文件 普通视图历史永久链接Permalink
test-h5-app.html 5.8 KB
Newer Older
Lab机器人's avatar
add public  
Lab机器人 已提交
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  
</body>
<script>
/**
 * wap 跳转app引流按钮
 *
 * http://jira.csdn.net/browse/FED-315
 */
 ;(function(window){
  //  多onload 事件方法
  window.addLoadEvent = window.addLoadEvent ? window.addLoadEvent : function addLoadEvent(func){
    var oldonload=window.onload;
    if(typeof window.onload != 'function'){
        window.onload=func;
    }else{
      window.onload=function(){
        oldonload();
        func();
      };
    }
  };
  /**
   * 获取第一个子元素
   */
  var getChildNodes = function(ele){
   var childArr = ele.children || ele.childNodes,
         childArrTem = new Array();  //  临时数组，用来存储符合条件的节点
    for(var i=0,len=childArr.length;i<len;i++){
        if(childArr[i].nodeType==1){
            childArrTem.push(childArr[i]);
        }
    }
    return childArrTem;
};
/**
 * 加载css
 */
function setStyle(poi){
  var css = document.createElement('style');
  css.type = 'text/css';
  css.innerHTML = ( [
    '.wapappdownloadbox{width:100%;height:60px;background: #3F3F3F;position:'+poi+';top: 0;z-index: 999;}',
    '.wapapp_download_box{padding:10px 4px 10px 16px;width: 82%;float: left;}',
    '.wapapp_download_box img{width:40px;float: left;margin-right: 8px;}',
    '.wapapp_download_text{float:left;width: 50%;}',
    '.wapapp_download_text h4{font-size: 16px;color: #FFFFFF;line-height: 20px;}',
    '.wapapp_download_text b{font-size: 12px;color: #999999;line-height: 20px;font-weight: 400;}',
    '.wapappdownloadbox .download_button{float:right;background: #F33B45;border-radius: 4px;font-size: 12px;color: #FFFFFF;line-height: 16px;padding:6px 12px;margin-top:6px;}',
    '.wapappdownloadbox_close_button{width: 17%;height: 60px;float: right;padding: 18px 19px;text-align: center;}',
    '.wapappdownloadbox_close_button svg{width: 15px;fill: #999;}',
  ]).join('');
  document.getElementsByTagName('head')[0].appendChild(css);
}
/**
 * class
 */
  function OpenWithApp(){

  }
  OpenWithApp.prototype.init = function(obj){
    // console.log(obj);
    obj = obj ? obj : {};
    /**
     * moveDOM 是为了fixed 到顶部的header等准备的，有此参数则需把此 节点 定位向下挪动
     */
    this.moveDOM  = obj.moveDOM;

    setStyle(obj.position);

    var buttonBox = document.createElement('div'),
        parentElement = document.getElementsByTagName('body')[0],
        referenceElement = getChildNodes(parentElement)[0];

    buttonBox.setAttribute("class", "wapappdownloadbox");
    this.parentElementstartPposition = getStyle(parentElement,'paddingTop');
    buttonBox.innerHTML = getTemplate();

    if(obj.position === 'fixed'){
      this.moveDOMstartPposition = getStyle(this.moveDOM,top);
      this.moveDOM ? this.moveDOM.setAttribute('style','top:60px'): '';
      parentElement.setAttribute('style','padding-top:60px');
    }

    // 插入结构
    parentElement.insertBefore(buttonBox, referenceElement);
    this.buttonBox = buttonBox;
    this.parentElement = parentElement;
    var that = this;
    bindclick(that);
  };

  OpenWithApp.prototype.open = function(url){
      window.location.href = "csdnapp://web?url=https://blog.csdn.net/rx3oyuyi/app/article/details/86700683";
      setTimeout(function() {
          window.location.href = "https://gw.csdn.net/cms-app/v1/set/download_app/?utm_source=wap";
      }, 1500);
  }
  function getTemplate(){
    return '<div class="wapapp_download_box" data-track-view=\'{"mod":"popu_726","con":",'+ window.location.href+',"}\' data-track-click=\'{"mod":"popu_726","con":",'+ window.location.href+',"}\'>'+
                              '<img src="//g.csdnimg.cn/open-with-app/images/appIcon.png">'+
                              '<div class="wapapp_download_text">'+
                                '<h4>CSDN官方APP</h4>'+
                                '<b>中国专业的IT社区</b>'+
                              '</div>'+
                              '<a class="download_button" href="javascript:void(0);">立即下载</a>'+
                            '</div>'+
                            '<div class="wapappdownloadbox_close_button"><svg version="1.1" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" ><path d="M100,85.6l57.5-57.5c4-4,10.4-4,14.4,0c4,4,4,10.4,0,14.4L114.4,100l57.5,57.5c3.9,4.1,3.7,10.5-0.4,14.4 c-3.9,3.7-10.1,3.7-14,0L100,114.4l-57.5,57.5c-4,4-10.4,4-14.4,0s-4-10.4,0-14.4L85.6,100L28.1,42.5c-4-4-4-10.4,0-14.4 s10.4-4,14.4,0L100,85.6z"/></svg></div>';
  }
  function bindclick(that){
    /**
     * 跳转
     */
    document.getElementsByClassName('wapapp_download_box')[0].addEventListener('click',function () {
        var url = "csdnapp://web?url=https://blog.csdn.net/jiangwei0910410003";
        csdn.openWithApp.open(url)
    });
    /**
     * 关闭按钮
     */
    document.getElementsByClassName('wapappdownloadbox_close_button')[0].addEventListener('click',function () {
      that.buttonBox.setAttribute("style", "display:none");
      that.moveDOM ? that.moveDOM.setAttribute('style','top:' + that.moveDOMstartPposition ) : '';
      that.parentElement.setAttribute('style','padding-top:'+ that.parentElementstartPposition );
    });
  }
  /**
   * 获取需要的dom样式
   */
  function getStyle(ele,css){
    return window.getComputedStyle(ele).css;
  }
  csdn = window.csdn?window.csdn:{}
  csdn.openWithApp = new OpenWithApp();
    // OpenWithApp.init(window.csdn.wapjumpapp);

})(window);
</script>
<script type="text/javascript">
  window.onload = function(){
    window.csdn.openWithAppData = {};
    window.csdn.openWithAppData.moveDOM = document.body;
    window.csdn.openWithAppData.position = 'fixed';
    window.csdn.openWithApp.init(window.csdn.openWithAppData);
  }
</script>
</html>