在页面加载后以编程方式选择Tab

时间:2017-11-26 14:05:33

标签: javascript jquery web-scraping

我需要从this page中提取信息。该页面有两个选项卡,产品和说明。产品是默认页面。当我想查看该选项卡的内容时,我可以单击描述。

我使用get_file_contents($ url)获取页面内容,下面是页面内容

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Best Online Shopping Mall</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <meta name="apple-mob ile-web-app-title" content="KiKUU">
        <meta name="renderer" content="webkit" />
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
        <!-- UC UC -->
        <meta name="full-screen" content="yes" />
        <meta name="browsermode" content="application" />
        <!-- QQ QQ -->
        <meta name="x5-fullscreen" content="true" />
        <meta name="x5-page-mode" content="app" />
        <meta name="format-detection" content="telephone=no, address=no">
        <script>
            !function(e){function t(){var t=n.clientWidth,r="}";!navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)&&t>1024&&(t=414,r=";max-width:"+t+"px;margin-right:auto!important;margin-left:auto!important;}"),e.rem=t/10,/ZTE U930_TD/.test(navigator.userAgent)&&(e.rem=1.13*e.rem),/M351 /.test(navigator.userAgent)&&(e.rem=e.rem/1.05),i.innerHTML="html{font-size:"+e.rem+"px!important;}body{font-size:"+12*(t/320)+"px"+r;var newFt=getComputedStyle(window.document.documentElement)['font-size'].replace('px','');if(newFt!==e.rem+''){var scale = e.rem/newFt; var newRem=e.rem*scale;i.innerHTML="html{font-size:"+newRem+"px!important;}body{font-size:"+12*(t*scale/320)+"px"+r}}{var n=document.documentElement,i=document.createElement("style");n.clientWidth}n.firstElementChild.appendChild(i),e.addEventListener("resize",function(){t()},!1),e.addEventListener("pageshow",function(e){e.persisted&&t()},!1),t()}(window);
        </script>
        <link rel="shortcut icon" type="image/png" href="http://7xlmt4.com5.z0.glb.clouddn.com/app-icon.png">
        <link rel="stylesheet" href="/styles/css/chaos.css">
        <link rel="stylesheet" href="http://images-global.kikuu.com/msite-static-javascript-min-dropload.min.css">

        
    <link rel="stylesheet" href="http://images-global.kikuu.com/msite-static-javascript-min-swiper.min.css">

        
    </head>
    <body>
        <div class="kikuu_ad">
            <div class="kikuu_ad__title"></div>
        </div>
        <div style="position: relative;">
            <header>
                
    <div id="productTop" class="ki-header">
        <a href="javascript:window.history.back();" class="top__back">
            <img src="/image/icon_back@3x.png" alt="" class="top__back-img">
        </a>
        <a href="/" class="top__home">
            <img src="/image/tabbar_Home_icon.png" alt="" class="top__home-img">
        </a>
        <div class="top__sel">
            <div class="top__sel-chil top__sel-active">
                <span>Product</span>
            </div>
            <div class="top__sel-chil top__sel-right">
                <span>Description</span>
            </div>
        </div>
    </div>

            </header>
            <div class="page">
                


<div id="productPage">
    <!--  -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div class="img-box">
                    <img src="http://images-global.kikuu.com/upload-productImg-17095586497266793_320_234.jpg?" alt="" class="swiper-slide-img">
                </div>
            </div>
            
                <div class="swiper-slide">
                    <div class="img-box">
                        <img src="http://images-global.kikuu.com/upload-productImg-17095587845932003_320_234.jpg?" alt="" class="swper-slide-img">
                    </div>
                </div>
            
            
                <div class="swiper-slide">
                    <div class="img-box">
                        <img src="http://images-global.kikuu.com/upload-productImg-17095589225692464_320_234.jpg?" alt="" class="swper-slide-img">
                    </div>
                </div>
            
            
                <div class="swiper-slide">
                    <div class="img-box">
                        <img src="http://images-global.kikuu.com/upload-productImg-17095590582994055_320_234.jpg?" alt="" class="swper-slide-img">
                    </div>
                </div>
            
            
                <div class="swiper-slide">
                    <div class="img-box">
                        <img src="http://images-global.kikuu.com/upload-productImg-17095591998516725_320_234.jpg?" alt="" class="swper-slide-img">
                    </div>
                </div>
            
        </div>
        <div style="font-size: 0;" class="swiper-pagination swiper-pagination-product"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
    
    <div class="goods-info">
        <div class="goods-info__icon">
            <!--<img src="/image/icon_share.png" alt="" class="icon_wish">-->
            <div alt="" class="icon_share uncollect " data-collect="collect"></div>
        </div>
        <div class="goods-info__title">178 orders</div>
        <div class="goods-info__subtitle">Summer Autumn Hot Selling Women Tight A-line party Dress Solid color Full Sleeve O-Neck Lady Sexy Dress Vestido S M L XL</div>
        <div class="goods-info__price">8,400 TZS</div>
        <div class="goods-info__once">
            
            <span class="once-count"></span>
        </div>
        
        <div class="goods-info__buy">Buy Now</div>
        <form id="checkout" method="post" action="/checkout">
            <input type="hidden" name="skuId" class="checkout-sku" />
            <input type="hidden" name="quantity" class="checkout-quantity" />
        </form>
    </div>
    
        <div class="goods-help" id="shippingInfo">
            <div class="goods-help-title">Estimated time of arrival: </div>
            <div class="goods-help-sub">11th Dec-21st Dec</div>
        </div>
    
    
        <div class="goods-help" id="service">
            <div class="goods-help-title">Service Commitment(2)</div>
            <div class="goods-help-content ki-flex">
                <div class="goods-help-content__sel ki-flex">
                    
                        <div class="help__sel-item">
                            <img src="https://qiniu.kikuu.com/icon_exfee_480.png" alt="" class="item-pic">
                            <span class="item-title">Shipping Fee</span>
                        </div>
                    
                        <div class="help__sel-item">
                            <img src="https://qiniu.kikuu.com/icon_seven_480.png" alt="" class="item-pic">
                            <span class="item-title">7 Days Free Returns</span>
                        </div>
                    
                </div>
                
            </div>
        </div>
    
    
    <div class="goods-store goods-section">
        <a href="/store/2621">
            <img src="http://images-global.kikuu.com/upload-productImg-1509759697054.jpeg" alt="" class="store-pic">
            <div class="store-content">
                <p class="content-title">Famous Clothing Shop</p>
                <ul class="attr__list ki-flex">
                    <li class="attr__item">173 Goods</li>
                    <li class="attr__item">33 New</li>
                    <li class="attr__item">792 Followers</li>
                </ul>
                <div class="store-more">
                    <span class="more-title">View Store</span>
                    <img src="/image/big_more.png" alt="" class="more-pic">
                </div>
            </div>
        </a>
    </div>
    <!--
    <div class="goods-comment goods-section">
        <div class="comment-box pub-box">
            <a href="/comment/712305">
                <div class="section-box ki-flex">
                    <img src="/image/icon_comment.png" alt="" class="icon_pub">
                    <span class="section-word">Comments (0)</span>
                    <img src="/image/big_more.png" alt="" class="icon_more">
                </div>
            </a>
        </div>
        <div class="review-box pub-box">
            <a href="/product/reviews/712305">
                <div class="section-box ki-flex">
                    <img src="/image/icon_reviws.png" alt="" class="icon_pub">
                    <span class="section-word">Reviews (0)</span>
                    <img src="/image/big_more.png" alt="" class="icon_more">
                </div>
                <div class="horizontal">
                    <ul class="horizontal__list">
                        <li class="horizontal__item">
                            <img src="https://gw.alicdn.com/bao/uploaded/TB1XmtdQpXXXXXfapXXSutbFXXX.jpg_350x350q70" alt="" class="horizontal__item-img">
                        </li>
                    </ul>
                </div>
            </a>
        </div>
        <div class="ques-box pub-box">
            <div class="section-box ki-flex">
                <img src="/image/icon_questions_black.png" alt="" class="icon_pub">
                <span class="section-word">Questions about the product (8)</span>
                <img src="/image/big_more.png" alt="" class="icon_more">
            </div>
        </div>
    </div>
    -->
    <div class="footer-box">
        <div class="footer__title">
            You May Also Like
        </div>
        <ul class="footer__list clearfix" id="might">
            
        </ul>
        <div class="footer__btn">
            <a href="/product/712305/related" style="display: block;width: 100%;height: 100%;">View All</a>
        </div>
    </div>
</div>
<div id="productDesc" style="display: none;"></div>
<div class="service-mask ki-mask" style="display: none;" id="service-mask">
    <div class="service-mask-wrapper">
        <div class="service-mask-wrapper-title">Service Commitment</div>
        <div class="service-mask-wrapper-content">
            <ul class="service-mask-content__list">
                
                    <li class="service-mask-content__item">
                        <img src="https://qiniu.kikuu.com/icon_exfee_480.png" alt="" class="item-img">
                        <h4 class="item-title">Shipping Fee</h4>
                        <p class="item-desc">Extra freight will be charged when ordering the product.</p>
                    </li>
                
                    <li class="service-mask-content__item">
                        <img src="https://qiniu.kikuu.com/icon_seven_480.png" alt="" class="item-img">
                        <h4 class="item-title">7 Days Free Returns</h4>
                        <p class="item-desc">If you are unsatisfied with this product,you may return it within 7 days of delivery for a full refund.</p>
                    </li>
                
            </ul>
        </div>
        <div class="service-mask-wrapper-footer">Done</div>
    </div>
</div>
<div class="shipping-mask ki-mask" id="shipping-mask" style="display: none;">
    <div class="shipping-mask-wrapper">
        <div class="shipping-mask-wrapper-title">Logistic(Info)</div>
        <div class="shipping-mask-wrapper-btn"></div>
        <div class="shipping-mask-wrapper-content">
            <ul class="shipping-mask-wrapper-content__list">
                
                    <li class="shipping-mask-wrapper-content__item ki-flex">
                        <span class="left">Available Destinations</span>
                        <span class="right">Tanzania</span>
                    </li>
                
                    <li class="shipping-mask-wrapper-content__item ki-flex">
                        <span class="left">Shipping from</span>
                        <span class="right">China</span>
                    </li>
                
                    <li class="shipping-mask-wrapper-content__item ki-flex">
                        <span class="left">Estimated time of arrival: </span>
                        <span class="right">11th Dec-21st Dec</span>
                    </li>
                
            </ul>
        </div>
    </div>
</div>


            </div>
            <footer>
                
            </footer>
        </div>

        
    </body>
    <script type="text/javascript" src="http://images-global.kikuu.com/msite-static-javascript-min-zepto.min.js"></script>
    <script type="text/javascript" src="http://images-global.kikuu.com/msite-static-javascript-min-handlebars.min.js"></script>
    <script type="text/javascript" src="/javascripts/chaos.js"></script>
    <script type="text/javascript" src="/javascripts/common/baseUtil.js"></script>
    <script type="text/javascript" src="http://images-global.kikuu.com/msite-static-javascript-min-dropload.min.js"></script>
    <script type="text/javascript" src="http://images-global.kikuu.com/msite-static-javascript-min-lazyload.min.js"></script>
    <script type="text/javascript" src="/javascripts/common/urlUtil.js"></script>
    <script type="text/javascript" src="/javascripts/common/rocketsBtn.js" async></script>
    
        <script>
            /* sensor track */
            (function(para){var p=para.sdk_url,n=para.name,w=window,d=document,s="script",x=null,y=null;w["sensorsDataAnalytic201505"]=n;w[n]=w[n]||function(a){return function(){(w[n]._q=w[n]._q||[]).push([a,arguments])}};var ifs=["track","quick","register","registerPage","registerOnce","registerSession","registerSessionOnce","trackSignup","trackAbtest","setProfile","setOnceProfile","appendProfile","incrementProfile","deleteProfile","unsetProfile","identify","login","logout"];for(var i=0;i<ifs.length;i++){w[n][ifs[i]]=w[n].call(null,ifs[i])}if(!w[n]._t){x=d.createElement(s),y=d.getElementsByTagName(s)[0];x.async=1;x.src=p;y.parentNode.insertBefore(x,y);w[n].para=para}})({sdk_url:"https://qiniu.kikuu.com/sensorsdata.min.js",name:"kikuu_sa",server_url:"http://sensors.kikuu.com:8006/sa"});
                
                kikuu_sa.logout();
                
            kikuu_sa.register({'platformType': 'msite'});
            kikuu_sa.quick('autoTrack');
        </script>
    
    
    
    <script type="text/javascript" src="http://images-global.kikuu.com/msite-static-javascript-min-swiper.min.js"></script>
    <script type="text/javascript" src="/javascripts/common/zepto-toast.js"></script>
    <script type="text/javascript" src="/javascripts/common/sku.js"></script>
    <script type="text/javascript" src="/javascripts/common/downloadAppPlugin.js" async></script>
    <script>

        



        var $buyBtn = $('.goods-info__buy');
        var checkoutForm = $('#checkout');
        var mySwiper = new Swiper ('.swiper-container', {
            loop: true,
            prevButton:'.swiper-button-prev',
            nextButton:'.swiper-button-next',
            // 
            pagination: '.swiper-pagination',
        })

        getMightLikeProductList();

        function getMightLikeProductList() {
            $.ajax({
                url: '/product/712305/related',
                type: 'GET',
                data: {
                    page: 1,
                    pagesize: 20
                },
                timeout: 10000,
                dataType: 'json',
                success: function(data){
                    if(data.obj&&data.obj.length > 0) {
                        $('#might').append($(createMightLikeList(data.obj)))
                    }
                },
                error: function(){

                }
            })
        }

        function createMightLikeList(data){
            //6
            var _html = '';
            for(var i = 0; i < 6; i++) {
                _html += '<li class="footer__item"><a href="/product/'+ data[i].id +'?productDetailSource=Recommend"><img src="'+ data[i].productImg0 +'" alt="" class="footer__item-pic"><div class="footer__item-price">' + toThousands(data[i].lowestPrice) + data[i].unitShow + '</div></a></li>';
            }
            return _html;
        }


        $buyBtn.click(function(){
            if (true) {
                $.sku.show({
                    productId: '712305',
                    choose: function(skuId, quantity) {
                        checkoutForm.find('.checkout-sku').val(skuId);
                        checkoutForm.find('.checkout-quantity').val(quantity);
                        $.toast.showLoading();
                        checkoutForm.submit();
                    }
                });
            }
        })

        $('.icon_share').on('click', function(e){
            e.stopPropagation();
            e.preventDefault();
            var _this = $(this), _collect = _this.data('collect');
            var reqUrl = '/product/712305/' + _collect;
            $.ajax({
                type: 'GET',
                dataType: 'json',
                url: reqUrl,
                data: {
                    currentUserId: '',
                    countryId: '2',
                    code: '',
                    collectId: ''
                },
                success: function(res){
                    if(res.success){
                        if(_this.hasClass('collect')) {
                            _this.data('collect', 'collect');
                            _this.removeClass('collect');
                        } else {
                            _this.data('collect', 'uncollect');
                            _this.addClass('collect');
                        }
                    }
                    else if(res.needLogin) {
                        var currentUrl = window.location.href;
                        setCookie('redirect', currentUrl, 3, '/');
                        window.location.href = '/login'
                    }
                }
            })
        })

        function setCookie(n, p, l, q, o) {
            var r = n + "=" + escape(p);
            if (l != "") {
                var m = new Date();
                m.setTime(m.getTime() + l * 3600 * 1000);
                r += ";expires=" + m.toGMTString()
            }
            if (q) {
                r += ";path=" + q
            }
            if (o) {
                r += ";domain=" + o
            }
            document.cookie = r
        }


        $('#service').on('click', function(){
            $('#service-mask').fadeIn()
        })

        $('#service-mask').on('click', function(e){
            e.preventDefault();
            e.stopPropagation();
            if($(e.target).hasClass('service-mask') || $(e.target).hasClass('service-mask-wrapper-footer')) {
                $('#service-mask').fadeOut()
            }
        })

        $('#shippingInfo').on('click', function(){
            $('#shipping-mask').fadeIn()
        })


        $('#shipping-mask').on('click', function(e){
            e.preventDefault();
            e.stopPropagation();
            if($(e.target).hasClass('shipping-mask') || $(e.target).hasClass('shipping-mask-wrapper-btn')) {
                $('#shipping-mask').fadeOut()
            }
        })






        var $topSel = $('.top__sel-chil'),
        firstAjax = true,
        $productDesc = $('#productDesc'),
        productDescUrl = true,
        $productPage = $('#productPage');

        $topSel.click(function() {
            if (!$(this).hasClass('top__sel-active')) {
                $(this).addClass('top__sel-active').siblings('.top__sel-active').removeClass('top__sel-active');
            } else {
                return;
            }
            if ($(this).hasClass('top__sel-right')) {
                if (firstAjax && productDescUrl) {
                    firstAjax = false;
                    $.ajax({
                        url: 'http://images-global.kikuu.com/ProductDetailToQiniu-17132715984761159.html',
                        success: function(data) {
                            $productDesc.append($(data))
                        },
                        error: function(err) {

                        },
                        complete: function() {
                            $productPage.hide();
                            $productDesc.show();
                        }
                    })
                } else {
                    $productPage.hide();
                    $productDesc.show();
                }
            } else {
                $productDesc.hide();
                $productPage.show();
            }
        })

        function toThousands(num) {
            var result = '', counter = 0;
            num = (num || 0).toString();
            for (var i = num.length - 1; i >= 0; i--) {
                counter++;
                result = num.charAt(i) + result;
                if (!(counter % 3) && i != 0) { result = ',' + result; }
            }
            return result;
        }
    </script>
    <script>
        kikuu_sa.track('PRODUCT_DETAIL', {
            'getH5ProductDetail_productId' : '712305',
            'getH5ProductDetail_productName' : 'Summer Autumn Hot Selling Women Tight A-line party Dress Solid color Full Sleeve O-Neck Lady Sexy Dress Vestido S M L XL',
            'getH5ProductDetail_storeName' : 'Famous Clothing Shop',
            'getH5ProductDetail_productRawPrice' : '18720',
            'getH5ProductDetail_productPrice' : '8400',
            'getH5ProductDetail_priceUnit' : '1'
        });
    </script>

    <script>
        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
                    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
                m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

        ga('create', 'UA-99241612-1', 'auto');
        ga('send', 'pageview');
    </script>
</html>

如您所见,“描述”选项卡属于类top__sel-right

以下javascript代码在“描述”选项卡上触发点击时运行

if ($(this).hasClass('top__sel-right')) {
                if (firstAjax && productDescUrl) {
                    firstAjax = false;
                    $.ajax({
                        url: 'http://images-global.kikuu.com/ProductDetailToQiniu-17132715984761159.html',
                        success: function(data) {
                            $productDesc.append($(data))
                        },
                        error: function(err) {

                        },
                        complete: function() {
                            $productPage.hide();
                            $productDesc.show();
                        }
                    })
                } else {
                    $productPage.hide();
                    $productDesc.show();
                }
            } else {
                $productDesc.hide();
                $productPage.show();
            }

我需要提取“描述”选项卡上提供的信息,请详细说明我如何以编程方式提取描述信息。

0 个答案:

没有答案