网页版阿里旺旺

淘宝天猫详情页插入旺旺聊天窗口

// ==UserScript==
// @name         网页版阿里旺旺
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  淘宝天猫详情页插入旺旺聊天窗口
// @author       You
// @match        https://item.taobao.com/item.htm?*
// @match        *://h5.m.taobao.com/awp/core/detail.htm?*
// @match        *://h5.m.taobao.com/ww/index.htm?*
// @match        https://detail.tmall.com/item.htm?*
// @match        https://detail.m.tmall.com/item.htm?*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    var url = window.location.href;
    if(url.indexOf('taobao') !== -1) { //淘宝页面
        window.onload = function() { // Dom渲染完才能开始，否则差找不到节点
            if(url.indexOf('h5.m.taobao') === -1){ //正常pc页面，非移动端
                iconInsert();


                var iconTb = document.getElementById('wangwang-icon');
                iconTb.onclick = function(){  //淘宝右下角插入的旺旺图标  点击事件
                    taobaoClick(url);
                };
                var contact = document.getElementsByClassName('ww-inline');

                contact[0].onclick= function(){   //淘宝网页原旺旺（联系我们） 点击事件
                    taobaoClick(url) ;
                };

            } else if (url.indexOf('awp/core/detail') !== -1){  //移动端详情页
                var wangwang = document.getElementsByClassName('icon');
                wangwang[0].click();
            } else if(url.indexOf('ww/index') !== -1){
                var back = document.getElementsByClassName('hisback');
                back[0].innerHTML= '关闭';
                back[0].onclick = function(event){
                    event.preventDefault();
                };
            }
        } ;

    }
    if( url.indexOf('tmall') !== -1){ //天猫页面
        window.onload=function(){
            if(url.indexOf('m.tmall') === -1){
                iconInsert();
                var iconTm = document.getElementById('wangwang-icon');
                iconTm.onclick = function (){ //天猫右下角插入的旺旺图标  点击事件
                    TmClick(url);
                };

                // var a = document.getElementsByClassName('name');
                //a[0].onclick= function(){   //天猫网页原旺旺（联系我们） 点击事件----------->异步加载，获取dom无效。
                //TmClick(url);
                //  };

            }else if (url.indexOf('detail.m.tmal') !== -1){  //移动端详情页

                var support = document.getElementsByClassName('support');
                var href = support[0].href;    //由于原链接为协议http:// 不安全无法打开。 对连接进行处理
                var hrefArr = href.split('');
                hrefArr.splice(4,0,'s');
                var hrefNew = hrefArr.join('');
                window.location.href= hrefNew;
            } else if(url.indexOf('ww/index') !== -1){
                var backTm = document.getElementsByClassName('hisback');
                backTm[0].innerHTML= '关闭';
                backTm[0].onclick = function(event){
                    event.preventDefault();
                };
            }
        };

    }
    //封装 插入旺旺icon
    function iconInsert(){
        var icon = document.createElement('div');  // 插入旺旺图标
        icon.id='wangwang-icon';
        icon.style.width = '100px';
        icon.style.height = '100px';
        icon.style.background = 'url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511083827779&di=88ced5d100067b9a9669009f8c780920&imgtype=0&src=http%3A%2F%2Fimg.25pp.com%2Fuploadfile%2Fsoft%2Fimages%2F2012%2F1128%2F20121128021904185.jpg")';
        icon.style.backgroundSize='cover';
        icon.style.position ='fixed';
        icon.style.bottom = '30px';
        icon.style.right = '50px';
        icon.style.zIndex = '2147483650';
        document.body.appendChild(icon);
    }
    //封装 淘宝点击 事件 (插入iframe--)
    function taobaoClick(url){
        var urlArr = url.split('');
        urlArr.splice(0,33,'https://h5.m.taobao.com/awp/core/detail.htm?');  //转换成移动端链接
        var urlNew = urlArr.join('');

        var insert = document.createElement('div');
        insert.id='iframeWrapper';
        insert.width='400px';
        insert.height='500px';
        insert.style.zIndex = '2147483650';
        insert.style.position = 'fixed';
        insert.style.right = '50px';
        insert.style.bottom = '10px';
        var button = document.createElement('div');  //插入 按钮 覆盖iframe的关闭
        button.style.position = 'absolute';
        button.style.height = '50px';
        button.style.width = '100px';
        button.style.zIndex = '1000';
        insert.appendChild(button);
        var iframe = document.createElement('iframe');  //插入iframe ==> 旺旺聊天窗口
        iframe.id = 'wangwang';
        iframe.width='400px';
        iframe.height='500px';
        iframe.style.zIndex = '10';

        iframe.src = urlNew;
        insert.appendChild(iframe);
        document.body.appendChild(insert);

        insert.onclick=function(){
            insert.style.display ='none';};
    }

    //封装天猫 点击事件
    function TmClick(url){
        var urlArr = url.split('');
        urlArr.splice(0,14,'https://detail.m');  //转换成移动端链接

        var urlNew = urlArr.join('');
        var insert = document.createElement('div');
        insert.id='iframeWrapper';
        insert.width='400px';
        insert.height='500px';
        insert.style.zIndex = '2147483650';
        insert.style.position = 'fixed';
        insert.style.right = '50px';
        insert.style.bottom = '10px';
        var button = document.createElement('div');  //插入 按钮 覆盖iframe的关闭
        button.style.position = 'absolute';
        button.style.height = '50px';
        button.style.width = '100px';
        button.style.zIndex = '1000';
        insert.appendChild(button);
        var iframe = document.createElement('iframe');  //插入iframe ==> 旺旺聊天窗口
        iframe.id = 'wangwang';
        iframe.width='400px';
        iframe.height='500px';
        iframe.style.zIndex = '10';

        iframe.src = urlNew;
        insert.appendChild(iframe);
        document.body.appendChild(insert);

        insert.onclick=function(){
            insert.style.display ='none';};
    }
    // Your code here...
})();