1. 首頁 > 生活 > >

javascript提示框用法 js提示對話框

小知識js提示對話框



文章插圖
javascript提示框用法 js提示對話框

文章插圖
【javascript提示框用法 js提示對話框】這個功能的實現主要使用了jsonp跨域訪問, 然后通過回調函數來將搜索到的關聯內容顯示出來。
JSONP(JSONwith Padding)是一個非官方的協議，它允許在服務器端集成Script tags返回至客戶端，通過javascript callback的形式實現跨域訪問（這僅僅是JSONP簡單的實現形式） 。
回調函數：當一個函數作為另一個函數的參數時，那么這個函數就是回調函數 。
效果如下
代碼如下
<script type="text/javascript">var txt = document.getElementById('text');var oUl = document.getElementById('list');var oBtn = document.getElementById('btn');txt.onkeyup = function () {oUl.innerHTML = '';oUl.style.display = 'none';var val = txt.value;var oScript = document.createElement('script'); //動態創建script標簽oScript.src ='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' +val +'&cb=callback';//添加鏈接及回調函數document.body.appendChild(oScript); //添加script標簽document.body.removeChild(oScript); //刪除script標簽};//回調函數function callback(data) {if (data.s && data.s.length) {const res = data.s;res.forEach(function (value) {var oLi = document.createElement('li');oLi.innerHTML ='<a style="display:inline-block;width:100%" +value +'">' +value +'</a>';oUl.appendChild(oLi);});oUl.style.display = 'block';}}//點擊跳轉到百度頁面，并搜索其中內容oBtn.onclick = function () {var val = txt.value;location. + val + '&cl=3';};</script>