6json跨域,百度联想词案例

"Hello World, Hello Blog"

Posted by wudimingwo on December 15, 2018

image.png 在各自的脚本中 设置 document.domain = “58.com” 两个网页就可以互相访问资源了. image.png 简单百度联想词案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewprot" content="width=device-width, initial-scale=1.0"/>
        <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
        <title>dddd</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
         <input type="text" name="aaa" id="aaa" value="" />
         <ul id="ul"></ul>
        <script type="text/javascript">
            
            function jsonp (value,cb) {
              var scr = document.createElement("script");
              scr.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" + value +"&cb=" + cb.name;
              document.body.appendChild(scr);
              document.body.removeChild(scr);// 创建完删除 script
            }
            
            function show (data) {
            	console.log(data);
            	var str = "";
            	var list = data.s;
            	list.forEach((item,index) => {
            	  str += "<li><a href='https://www.baidu.com/s?wd=" + item + "' target='_blink'>" + item + "</a></li>";
            	})
            	ul.innerHTML = str;
            }
            
            aaa.oninput = function (e) {
            	jsonp(this.value,show);
            }
        </script>
    </body>
</html>

加上一个搜狗 搜狗应该也是jsonp技术, 不过不必传cb字符串, 他直接锁定了字符串 window.sougou.sug 所以我们只需要把回调函数定义在这个路径上就可以.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewprot" content="width=device-width, initial-scale=1.0"/>
        <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
        <title>dddd</title>
        <style type="text/css">
            body{
              margin: 0;
              padding: 0;
            }
            iframe {
              width: 80vw;
              height: 100vh;
              position: absolute;
              left : 20vw;
              z-index: -1;
            }
            ul, li{
              width: 200px;
            }
            
        </style>
    </head>
    <body>
      <iframe id="ifram" src="https://www.baidu.com" ></iframe>
         <span>百度</span><br />
         <input type="text" name="aaa" id="aaa" value="" />
         <ul id="ul"></ul>
         <span>搜狗</span><br />
         <input type="text" name="bbb" id="bbb" value="" />
         <ul id="ull"></ul>
        <script type="text/javascript">
            
            function jsonp (value,cb) {
              var scr = document.createElement("script");
              scr.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" + value +"&cb=" + cb.name;
              document.body.appendChild(scr);
              document.body.removeChild(scr);// 创建完删除 script
            }
            function jsonpp (value) {
              console.log(value);
              var scr = document.createElement("script");
              scr.src = "https://www.sogou.com/suggnew/ajajjson?key=" + value + "&type=web&";
              document.body.appendChild(scr);
//            document.body.removeChild(scr);// 创建完删除 script
            }
            
            function show (data) {
            	console.log(data);
            	var str = "";
            	var list = data.s;
            	list.forEach((item,index) => {
            	  str += "<li>" + item + "</li>";
            	})
            	ul.innerHTML = str;
            }
            
            aaa.oninput = function (e) {
            	jsonp(this.value,show);
            }
            ul.onclick = function (e) {
              if(e.target.tagName == "LI") {
                ifram.src = "https://www.baidu.com/s?wd=" + e.target.innerText;
              }
            }
            
            
            var sogou = {}
            sogou.sug = function (data) {
            	console.log(data[1]);
            	var list = data[1];
            	var str = "";
            	list.forEach((item,index) => {
            	  str += "<li>" + item + "</li>"
            	});
            	ull.innerHTML = str;
            }
            
            bbb.oninput = function (e) {
              jsonpp(this.value);
            }
            
            ull.onclick = function (e) {
              if(e.target.tagName == "LI") {
                ifram.src = "https://www.sogou.com/web?query=" + e.target.innerText;
              }
            }
        </script>
    </body>
</html>