淘宝京东等商城,集合到一个网页里

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了淘宝京东等商城,集合到一个网页里相关的知识,希望对你有一定的参考价值。

我见过一个页面里,同时放置多家搜索网站,这样可以方便比较不同的搜索结果。
根据这个Idear,我做了一个可以放置多家知名商城的网页,一个纯静态的网页,手机版,包含9家网站,只有一个页面,为双十一剁手必备网页。添加链接在数组里加一行即可。

PC版的就不放上来了。

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>手机版</title>
            <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
            <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
            <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
            <style type="text/css">
                html,
                body {
                    margin: 0;
                    height: 100%;
                }
                .navbar{
                    margin-bottom:0px;
                }
                /* 加载 */
                #loading0,#loading1{z-index:1;padding:5px 0 5px 9px;background:#c44;left:0;top:0;width:90px;color:#fff;}
                /* 表格 */
                .table{margin-bottom: 2px;width:100%;}
                /* 商城的名称 */
                .mystyle a{padding-top:6px;padding-bottom:6px;font-size:17px;font-weight:bold;}
            </style>
        </head>
        <body onkeydown="keyDown(event);">
            <nav class="navbar navbar-default" role="navigation">
                <div class="navbar-header" style="float:none;">
                    <div class="input-group">
                        <input type="text" class="form-control input-lg" id="search0" value="手机">
                        <span class="input-group-addon btn" onclick="search0();" style="display:none;">搜索</span>
                        <span class="input-group-addon btn btn-primary" onclick="searchAll(0);">搜索</span>
                    </div>
                </div>
            </nav>
            <nav class="navbar navbar-default" role="navigation">
                <div class="navbar-header addradio" style="folat:none;">
                    <a class="navbar-brand" href="#">请选择商城</a>
                    <ul class="nav navbar-nav">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                <b class="caret"></b>
                            </a>
                            <ul class="dropdown-menu" id="malls"></ul>
                        </li>
                    </ul>
                </div>
            </nav>
            <iframe src="" style="visibility:inherit; width:100%;z-index:1;" id="f1" frameborder="0" scrolling="yes" marginheight="0" marginwidth="0" onload="iFrameHeight(150)">
            </iframe>
        </body>
        <script type="text/javascript">
        //iFrame高度
        function iFrameHeight(num) {
            var ifm = $("iframe");
            var h = document.body.clientHeight - num;
            if (ifm != null && h > ifm.height()) {
                ifm.height(h);
            }
        }
        $(window).resize(iFrameHeight(150));
        $(document).ready(iFrameHeight(150));
        //加载选项
        $(function(){
            window.arr = [
                ["京东","http://so.m.jd.com/ware/search.action?keyword=mykey"],
                //没有价格参数
                ["一号店","http://search.m.yhd.com/search/c0-0/kmykey/mb0-pr-a-d1-t-f06"],
                //按自营
                ["淘宝","https://s.m.taobao.com/h5?q=mykey&search=提交查询&tab=all"],
                //按价格
                ["国美电器","http://m.gome.com.cn/category.html?from=1&scat=3&key_word=mykey&sort_by=1"],
                //价格低到高
                ["天猫","https://list.tmall.com/search_product.htm?q=mykey"],
                //跳转PC版
                ["当当网","http://search.m.dangdang.com/search.php?keyword=mykey"],
                //没价格参数
                ["新蛋中国","http://m.newegg.cn/Search.aspx?keyword=mykey&sort=30"],
                //按价格
                ["华强北商城","http://m.okhqb.com/search.html?q=mykey&sort=price"],
                //按价格
                ["乐村淘","http://www.lecuntao.com/wap/tmpl/product_list.html?keyword=mykey"]
                //没有价格参数,
            ]
            window.iheight = $(‘#f1‘).height();
            //下拉
            var html = ‘‘;
            for(var i=0;i<arr.length;i++){
                if(i!=0)html += ‘<li class="divider"></li>‘;
                html += ‘<li><a href="javascript:void(0);" link="‘+arr[i][1]+‘" onclick="search1(this);">‘+arr[i][0]+‘</a></li>‘;
            }
            $(‘#malls‘).html(html);
            $(‘.caret‘).before(arr[0][0]);
            //按钮
            var html2 = ‘‘;
            for(var j=0;j<arr.length;j++){
                html2 += ‘<label class="radio checkbox-inline" style="margin-top:10px;margin-left:20px;" link="‘+arr[j][1]+‘" onclick="search1(this);">‘;
                html2 += ‘<input type="radio" name="optionsRadiosinline" id="optionsRadios2" value="option1" checked>‘+arr[j][0]+‘</label>‘;
            }
            $(‘.addradio‘).after(html2);
            
            //前三个
            var html3 = ‘‘;
            html3 += ‘<table style="display:none;height:‘+iheight+‘px" border="1" id="table" class="table"><tr>‘;
            for(var n=0;n<3;n++){
                html3 += ‘<td>‘;
                html3 += ‘<nav class="navbar navbar-default mystyle" role="navigation">‘;
                html3 += ‘<div class="navbar-header">‘;
                html3 += ‘<a class="navbar-brand" href="#" style="color:#428bca;">‘;
                switch(n){case 0:html3 += arr[0][0];break;case 1:html3 += arr[1][0];break;default:html3 += arr[2][0];}
                html3 += ‘</a>‘;
                html3 += ‘</div>‘;
                html3 += ‘<nav>‘;
                switch(n){case 0:html3 += ‘‘;break;case 1:html3 += ‘<div id="loading0">正在加载</div>‘;break;default:html3 += ‘<div id="loading1">正在加载</div>‘;}
                html3 +=‘<iframe src="" style="height:‘+iheight+‘px;visibility:inherit; width:100%;z-index:1;"‘;
                switch(n){case 0:html3 += ‘ id="f2" ‘;break;case 1:html3 += ‘ id="f3" ‘;break;default:html3 += ‘ id="f4" ‘;}
                html3 += ‘frameborder="0" scrolling="yes" marginheight="0" marginwidth="0" >‘;
                html3 += ‘</iframe>‘;
                html3 += ‘</td>‘;
            }
            html3 += ‘</tr></table>‘;
            $(‘#f1‘).after(html3);
            //一开始打开前三个
            search0();
        });
        //前三个
        function search0(){
            $(‘#f1‘).css(‘display‘,‘none‘);
            KeyAndReset();
            $(‘#table‘).attr(‘style‘,‘width:100%;‘);
            var f2,f3,f4;
            f2 = arr[0][1];
            f3 = arr[1][1];
            f4 = arr[2][1];
            $(‘#f2‘).attr("src",myrep(f2,keyword));
            myload(‘loading0‘,‘f3‘,f3,2000);
            myload(‘loading1‘,‘f4‘,f4,4000);
        }
        //搜索全部
        function searchAll(again){
            //重置页面
            $(‘.table2‘).remove();
            //前三个
            search0();
            //三个以后 开始
            var html_t = ‘‘;
            var arrList = [];
            //三个一组
            for(var k=0,len=arr.length;k<len;k+=3){
                arrList.push(arr.slice(k,k+3));
            }
            for(var l=1;l<arrList.length;l++){
                html_t += ‘<table border="1" class="table table2">‘;
                    html_t += ‘<tr>‘;
                        for(var m=0;m<arrList[l].length;m++){
                            var source = myrep(arrList[l][m][1],keyword);
                            var mname = arrList[l][m][0];
                            html_t += ‘<td>‘;
                            //商城的名称
                            html_t += ‘<nav class="navbar navbar-default mystyle" role="navigation">‘;
                            html_t += ‘<div class="navbar-header">‘;
                            html_t += ‘<a class="navbar-brand" href="#" style="color:#428bca;">‘+mname+‘</a>‘;
                            html_t += ‘</div>‘;
                            html_t += ‘<nav>‘;
                            html_t += ‘<iframe src="‘+source+‘" style="visibility:inherit; width:100%;z-index:1;height:‘+iheight+‘px;" frameborder="0" scrolling="yes" marginheight="0" marginwidth="0" ‘;
                            html_t += ‘></iframe>‘;
                            html_t += ‘</td>‘;
                        }
                    html_t += ‘</tr>‘;
                html_t += ‘</table>‘;
            }
            $(‘#table‘).after(html_t);
            //苏宁易购有时候一次不出现,需要再点击一次
            if(again == 0){
                setTimeout(function() { 
                    searchAll(1);
                },1000)
            }else{ 
                return false;
            } 
        }
        //下拉框搜索
        function search1(_this){
            //重置页面
            $(‘.table2‘).remove();
            //搜索框关键字
            keyword = $(‘#search0‘).val();
            keyword = encodeURI(keyword);
            //隐藏和显示
            $(‘#f1‘).css(‘display‘,‘block‘);
            $(‘#table‘).css(‘display‘,‘none‘);
            //替换列表框上的字
            $(‘.caret‘).parent().empty(‘‘).html(‘<b class="caret">‘);
            var malls = $(_this).text();
            $(‘.caret‘).before(malls);
            var link2 = $(_this).attr(‘link‘);
            link2 = myrep(link2,keyword);
            //单独打开的,特殊都在这里处理
            $(‘#f1‘).attr("src",link2);
        }
        //更改链接关键字
        function myrep(l,t){
            r = new RegExp(‘mykey‘,‘g‘);
            return l.replace(r,t);
        }
        function myload(load,f,link,time){
            setTimeout(function(){
                $(‘#‘+load).css(‘display‘,‘none‘);
                $(‘#‘+f).attr("src",myrep(link,keyword));
                $(‘#‘+f).css(‘display‘,‘block‘);
            },time);
        }
        function KeyAndReset(){
            //搜索框关键字
            keyword = $(‘#search0‘).val();
            //重置
            $(‘#loading0‘).css(‘display‘,‘block‘);
            $(‘#f3‘).css(‘display‘,‘none‘);
            $(‘#loading1‘).css(‘display‘,‘block‘);
            $(‘#f4‘).css(‘display‘,‘none‘);
        }
        </script>
</html>

本文出自 “飞天马铃薯神教” 博客,转载请与作者联系!

以上是关于淘宝京东等商城,集合到一个网页里的主要内容,如果未能解决你的问题,请参考以下文章

京东淘宝的APP页面其实是HTML网页?如何获取到URL?

淘宝,天猫,京东都是谁创立的?

淘宝 京东等商城常用到的下拉菜单

《元宇宙工程》新书正式出版 已上架京东淘宝等网上商城

《元宇宙工程》新书正式出版 已上架京东淘宝等网上商城

中小型电商相当适配:京东商城系统架构设计原则精炼