jsonp跨域寫淘寶搜索聯想詞（原生js）
阿新 • • 發佈：2018-05-30
div 註意 abs scrip 基礎 屬性 體驗 blur ext
一、主體
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9二、問題 1.input標簽內，不是style內置屬性，不能用style獲取，比如input.value、input.placeholder 2.selfBox框內的內容要比實時的input框值，以及獲取的資源值，慢一點點。所以用資源值的長度來監聽更加準確，從而才能及時消除box框 3.兩個不同路徑的跨域，一個input框內值的變化及時跨域獲取資源，二是a標簽跨域到新的頁面，需要獲取新的頁面的URL。 該項目中兩種不同的路徑跨域都有兩處使用，分別是input值的變化——路徑1，當input默認值是“化妝品”，不要變化的時候，onfocus聚焦需要跨域——路徑1； 當box中的每個li下的a標簽直接鏈接到各自的頁面時，需要跨域得到各自的頁面URL——路徑2 ；當點擊“搜索”時，需要a標簽獲取input框內的值，拼接成新的url 超鏈接到新的頁面需要跨域——路徑2 4.定位時，position、top、left，同級塊元素跟文檔之間的定位是以border為標準。 5.畫半圓的方法需要熟悉。 6.jsonp跨域：創建script標簽——script.src獲取資源——將script標簽插入到body中——將script標簽從body中刪除——回調函數的使用 7.跨域的方式：（1）flash（2）服務器代理中轉（3）document.domain：將基礎域名相同的設置在需要相互訪問的頁面的腳本中（4）jsonp跨域。<style> 10 * { 11 padding: 0px; 12 margin: 0px; 13 list-style: none; 14 text-decoration-line: none; 15 } 16 17 input { 18 position: relative; 19 top: 200px; 20 left: 200px; 21 width: 400px; 22 height: 28px; 23 border: 2px solid #f40; 24 border-top-left-radius: 28px; 25 border-bottom-left-radius: 28px;26 text-indent: 1em; 27 outline: none; 28 } 29 30 .search { 31 position: absolute; 32 top: 200px; 33 left: 604px; 34 width: 80px; 35 height: 28px; 36 line-height: 28px; 37 text-align: center; 38 border: 2px solid #f40; 39 color: #fff; 40 background-color: #f40; 41 cursor: pointer; 42 } 4344 .box { 45 position: absolute; 46 top: 232px; 47 left: 200px; 48 width: 400px; 49 50 border: 2px solid #ccc; 51 background: #fff; 52 display: none; 53 } 54 55 li { 56 cursor: pointer; 57 } 58 59 li:hover { 60 background-color: #ccc; 61 } 62 63 .box li a { 64 display: block; 65 66 width: 100%; 67 height: 100%; 68 color: black; 69 font-size: 14px; 70 padding-left: 1em; 71 margin-top: 3px; 72 } 73 74 .search a { 75 display: block; 76 width: 100%; 77 height: 100%; 78 font-size: 16px; 79 color: #fff; 80 } 81 </style> 82 </head> 83 84 <body> 85 <input type="text" style="color:#666" value="女士化妝品" placeholder="請輸入要搜索的商品"> 86 <div class="search"> 87 <a href="#">搜 索</a> 88 </div> 89 <div class="box"></div> 90 <script> 91 var oInput = document.getElementsByTagName(‘input‘)[0]; 92 var search = document.getElementsByTagName(‘div‘)[0]; 93 var box = document.getElementsByTagName(‘div‘)[1]; 94 var A = document.querySelector(‘.search a‘); 95 var selfA = A, 96 selfInput = oInput, 97 selfBox = box; 98 //跨域1——監聽input框內值的變化，通過跨域函數及時獲取服務器資源 99 selfInput.oninput = crossDomain; 100 //跨域函數 101 function crossDomain(){ 102 var oScript = document.createElement(‘script‘); 103 oScript.src = ‘https://suggest.taobao.com/sug?code=utf-8&q=‘ + this.value + ‘&callback=jsonp1‘; 104 document.body.appendChild(oScript); 105 document.body.removeChild(oScript); 106 } 107 108 function jsonp1(data) { 109 var s = ‘‘; 110 var str = data.result; 111 if (str.length > 0) { 112 //要用加載的資源長度來判斷，而不能用box框的innerHTML或innerText 113 //因為，box的結構和內容要比實時資源慢一點。 114 str.forEach(function (ele, index) { 115 s = s + ‘<li><a href = https://s.taobao.com/search?initiative_id=tbindexz_20170306&q=‘ + 116 ele[0] + ‘>‘ + ele[0] + ‘</a></li>‘; 117 }); 118 selfBox.innerHTML = s; 119 selfBox.style.display = ‘block‘; 120 } else { 121 selfBox.style.display = ‘none‘; 122 } 123 selfBox.onclick = function (e) { 124 //此處的跨域也是通過路徑2，也是a標簽跨域。 125 selfInput.value = e.target.innerText; 126 } 127 //方法1，加定時器延遲時間 128 selfInput.onblur = function () { 129 //這個地方解決的問題是：只要input框值是空，當鼠標離焦的時候，就把值變為‘女士化妝品‘ 130 //並且此時聚焦又可以出發新的onfocus，但是顯得多此一舉，用戶體驗不好，因為一直出現‘女士化妝品‘，有點流氓， 131 //不過默認值可以隨機變的話，就畫龍點睛了。 132 // if (this.value == ‘‘) { 133 // this.value = ‘女士化妝品‘; 134 // selfInput.onfocus = crossDomain; 135 // } 136 setTimeout(function () { 137 selfBox.style.display = ‘none‘; 138 }, 100) 139 } 140 //方法2，a標簽和click事件都需要鼠標點下+擡起，沒有blur事件快 141 //但是mousedown事件比blur事件快，但是無法觸發a標簽。 142 // selfInput.onblur = function(){ 143 // selfBox.style.display = ‘none‘; 144 // } 145 selfInput.onfocus = function () { 146 if (str.length > 0) { 147 selfBox.style.display = ‘block‘; 148 } 149 } 150 } 151 //跨域2——input框的默認值是“女士化妝品”，此時鼠標聚焦也需要跨域，因為此時input框內的值沒有發生變化； 152 //需要註意的是，一旦觸發了跨域1，裏面新的onfocus會替換該onfocus，至此，該onfocus就不會再觸發。 153 selfInput.onfocus = crossDomain; 154 //點擊a標簽搜索商品，也跨域，不過是通過跨域路徑2，超鏈接的路徑。 155 selfA.onclick = function (e) { 156 this.href = ‘https://s.taobao.com/search?initiative_id=tbindexz_20170306&q=‘ + oInput.value; 157 } 158 </script> 159 </body> 160 161 </html>
jsonp跨域寫淘寶搜索聯想詞（原生js）