方法1
方法2
方法3
操作方法
将下面的代码分别粘贴到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或者classcontainerWidth
可选，查询结果内容区域的宽度，不指定默认获取container节点的宽度containerHeight
可选，查询结果内容区域的高度，默认300