<style>
body{margin: 0;}
ul{margin: 0;padding: 0;list-style: none;}
a{color:inherit;text-decoration: none;}
input{padding: 0;border: 0;}
.box{width: 340px;height: 38px;border: 2px solid gray;}
.con{overflow: hidden;}
.input{float: left;width: 300px;height: 38px;}
.search{width: 38px;height: 38px;float: right;background: url('http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/search.png') 0 -38px;}
.list{position: absolute;width: 298px;border: 1px solid #e6e8e9; overflow: hidden;}
.in{line-height: 30px;border-bottom: 1px solid lightblue;cursor:pointer;text-indent: 1em;}
.list .in:last-child{margin-bottom: -1px;}
.in:hover{background-color: #f9f9f9;}
</style> <div class="box" id="box">
<div class="con">
<input class="input" id="search">
<a target="_blank" id="btn" href="javascript:;" class="search"></a>
</div>
<ul class="list" id="list"></ul>
</div>
<script>
function loadScript(url){
loadScript.mark = 'load';
var script = document.createElement("script");
script.type = "text/javascript";
script.src = url;
document.body.appendChild(script);
}
function callback(data){
if(data){
var arr = data.s;
var html = '';
for(var i = 0,len = arr.length; i < len; i++){
html+= "<li class='in'><a href='https://www.baidu.com/s?wd="+ arr[i]+"' target='_blank' style='display:block'>" + arr[i]+ "</a></li>"
}
list.innerHTML = html;
}
}
search.onkeyup = function(e){
e = e || event;
if(e.keyCode == '13'){
window.open('https://www.baidu.com/s?wd=' + this.value);
}
if(this.value){
if(search.data != this.value){
btn.setAttribute('href','https://www.baidu.com/s?wd=' + this.value);
var that = this;
loadScript("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" + that.value + "&&cb=callback");
}
}else{
list.innerHTML = '';
}
search.data = this.value;
console.log( search.data ,this.value)
}
search.onclick = function(e){
e = e || event;
list.style.display = 'block';
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
}
document.onclick = function(){
list.style.display = 'none';
}
</script>

  

有意思的jsonp的更多相关文章

  1. 疯狂的JSONP

    何为跨域?何为JSONP?JSONP技术能实现什么?是否有必要使用JSONP技术? 跨域 就是由于JavaScript同源策略的限制,使得a.com域名下的js无法操作b.com或c.a.com域名下 ...

  2. 浅谈Json和jsonp

    定义: JSON:是一种数据交换格式, JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议 曾经看到一个有意思的例子:JSON是地下党们用来书写和交换情报的“暗号”的话, 而JS ...

  3. 跨域利器JSONP(转)

    何为跨域?何为JSONP?JSONP技术能实现什么?是否有必要使用JSONP技术? 跨域 就是由于JavaScript同源策略的限制,使得a.com域名下的js无法操作b.com或c.a.com域名下 ...

  4. 分享一个jsonp劫持造成的新浪某社区CSRF蠕虫

    最近jsonp很火,实话说已经是被玩烂了的,只是一直没有受到大家的重视.正好在上个月,我挖过一个由于jsonp造成的新浪某社区CSRF,当时是为了准备一篇文章,之后这篇文章也会拿出来分享. 因为新浪已 ...

  5. [转] 疯狂的JSONP

      何为跨域?何为JSONP?JSONP技术能实现什么?是否有必要使用JSONP技术? 跨域 就是由于JavaScript同源策略的限制,使得a.com域名下的js无法操作b.com或c.a.com域 ...

  6. 关于JSONP以及跨域相关

    什么是跨域: 浏览器对ajax请求的限制,不允许跨域请求资源. http://www.a.com--->http://www.b.com       是跨域 http://www.a.com-- ...

  7. 跨域及jsonp

    什么是跨域? 要解释跨域,就要先说明下什么是域?域的英文名是Domain,百度百科给的定义是: 域(Domain)是Windows网络中独立运行的单位,域之间相互访问则需要建立信任关系(即Trust ...

  8. JSONP Hijackin攻击详解

    JSONP Hijackin的中文意思是JSON劫持,而能产生JSON数据劫持的原因在于前端被跨站攻击了.跨站=跨域,跨域从字面上理解的话,就是指超出了范围.领域.继续追问一下,那超出了什么范围?原来 ...

  9. 实例操作JSONP原理

    絮语:按这个步骤走,你就会明白JSONP是什么鬼. 1.工程目录: ng-mywork demo.html test.js 2.nginx的server配置 server { listen ; ser ...

随机推荐

  1. 搜索【洛谷P2845】 [USACO15DEC]Switching on the Lights 开关灯

    P2845 [USACO15DEC]Switching on the Lights 开关灯 题目背景 来源:usaco-2015-dec Farm John 最近新建了一批巨大的牛棚.这些牛棚构成了一 ...

  2. 数据结构6: 静态链表及C语言实现

    本节继续介绍线性表的另外一种链式表示——静态链表.(前面介绍的链表称为 动态链表 ). 逻辑结构上相邻的数据元素,存储在指定的一块内存空间中,数据元素只允许在这块内存空间中随机存放,这样的存储结构生成 ...

  3. mongoDB3.4安装

    添加官方yum源——mongodb3.4vim /etc/yum.repos.d/mongodb-org-3.4.repo [mongodb-org-3.4] name=MongoDB Reposit ...

  4. element,点击查看,实现tab切换:

    点击查看,实现tab切换: 代码如下: <template> <div> <el-table :data="tableData" style=&quo ...

  5. Python序列类型各自方法

    在Python输入dir(str).dir(list).dir(tuple)可查看各种序列类型的所有方法. 对于某个方法不懂怎么使用的情况,可以直接help(str.split)对某个方法进行查询. ...

  6. C语言利用指针排序与选择排序算法

    //读入字符串,并排序字符串 #include <stdio.h> #include <string.h> #define SIZE 81 #define LIM 20 #de ...

  7. 多线程DP (要一起行动才可以)

    题目描述 Description 设有N*N的方格图(N<=10,我们将其中的某些方格中填入正整数,而其他的方格中则放入数字0.如下图所示(见样例): 某人从图的左上角的A 点出发,可以向下行走 ...

  8. 1.Ioc&DI和Spring

    1.面向对象回顾和案例 面向对象程序设计:1 2 3 4 案例分析: 需求分析: 报表功能:     报表服务类,检索数据,并生成图标     报表生成器类,生成不同格式的报表文件,例如PDF格式.H ...

  9. 报错:The valid characters are defined in RFC 7230 and RFC 3986

    访问 spring boot controller时,报错:The valid characters are defined in RFC 7230 and RFC 3986 1.特殊符号 @Spri ...

  10. PHP rand 和 mt_rand

    PHP mt_rand() 函数 定义和用法 mt_rand() 使用 Mersenne Twister 算法返回随机整数. 语法 mt_rand(min,max) 说明 如果没有提供可选参数 min ...