物流查询插件

您可以嵌入查询插件,让用户随时输入运单号去查询物流信息

操作方法

将下面的代码分别粘贴到Html中的<head>和</head>之间,以及<body>和</body>标签之间。查询小部件将展示在对应的位置。

复制代码

    <!-- <head> -->
    <!-- 样式引入 -->
    <link rel="stylesheet" href="//openapi.kdzs.com/kdzstrack.2.0.0.min.css">
    <!-- </head> -->

    <!-- <body> -->
    <!--单号输入框 -->
    <input type="text" id="num" maxlength="50"/>
    <!--用于调用脚本方法的按钮 -->
    <input type="button" value="TRACK" onclick="onQuery()"/>
    <!--用于显示快递查询结果的容器 -->
    <div id="custom-container"></div>

    <!--脚本代码可放于页面底部,等到页面最后执行。-->
    <script type="text/javascript" src="//openapi.kdzs.com/kdzstrack.2.0.0.min.js"></script>
    <script type="text/javascript">
    const track = new KDZSTrack({
        container: '#custom-container',
        // (可选)查询结果内容区域的宽度,不指定默认获取ID为custom-container节点的宽度
        containerWidth: 1000,
        // (可选)查询结果内容区域的高度
        containerHeight: 300
    })

    function onQuery() {
        const num = document.getElementById("num").value.trim();
        if(num === ""){
            alert("请输入运单号."); 
            return;
        }
        track.searchSingle({
            // 运单号
            num: num,
            // (可选)快递公司编码,携带该参数会增加结果的准确性
            // code: 'SF'
        });
    }
    </script>
    <!-- </body> -->
    

示例说明

  • container

    必选,指定承载内容的容器ID或者class
  • containerWidth

    可选,查询结果内容区域的宽度,不指定默认获取container节点的宽度
  • containerHeight

    可选,查询结果内容区域的高度,默认300