有意思的jsonp
<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的更多相关文章
- 疯狂的JSONP
何为跨域?何为JSONP?JSONP技术能实现什么?是否有必要使用JSONP技术? 跨域 就是由于JavaScript同源策略的限制,使得a.com域名下的js无法操作b.com或c.a.com域名下 ...
- 浅谈Json和jsonp
定义: JSON:是一种数据交换格式, JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议 曾经看到一个有意思的例子:JSON是地下党们用来书写和交换情报的“暗号”的话, 而JS ...
- 跨域利器JSONP(转)
何为跨域?何为JSONP?JSONP技术能实现什么?是否有必要使用JSONP技术? 跨域 就是由于JavaScript同源策略的限制,使得a.com域名下的js无法操作b.com或c.a.com域名下 ...
- 分享一个jsonp劫持造成的新浪某社区CSRF蠕虫
最近jsonp很火,实话说已经是被玩烂了的,只是一直没有受到大家的重视.正好在上个月,我挖过一个由于jsonp造成的新浪某社区CSRF,当时是为了准备一篇文章,之后这篇文章也会拿出来分享. 因为新浪已 ...
- [转] 疯狂的JSONP
何为跨域?何为JSONP?JSONP技术能实现什么?是否有必要使用JSONP技术? 跨域 就是由于JavaScript同源策略的限制,使得a.com域名下的js无法操作b.com或c.a.com域 ...
- 关于JSONP以及跨域相关
什么是跨域: 浏览器对ajax请求的限制,不允许跨域请求资源. http://www.a.com--->http://www.b.com 是跨域 http://www.a.com-- ...
- 跨域及jsonp
什么是跨域? 要解释跨域,就要先说明下什么是域?域的英文名是Domain,百度百科给的定义是: 域(Domain)是Windows网络中独立运行的单位,域之间相互访问则需要建立信任关系(即Trust ...
- JSONP Hijackin攻击详解
JSONP Hijackin的中文意思是JSON劫持,而能产生JSON数据劫持的原因在于前端被跨站攻击了.跨站=跨域,跨域从字面上理解的话,就是指超出了范围.领域.继续追问一下,那超出了什么范围?原来 ...
- 实例操作JSONP原理
絮语:按这个步骤走,你就会明白JSONP是什么鬼. 1.工程目录: ng-mywork demo.html test.js 2.nginx的server配置 server { listen ; ser ...
随机推荐
- webstrom 10 注册码
webStorm : UserName:William ===== LICENSE BEGIN ===== 45550-12042010 00001SzFN0n1bPII7FnAxnt0DDOPJA ...
- POJ1511 Invitation Cards SPFA算法裸题变形
原题目:http://poj.org/problem?id=1511 给出一个有向图,求出这个图从1到所有点的最短路径和所有点到1的最短路径的和. 这题数据量有点大,数据范围也大,所以用SPFA+邻接 ...
- windows安装redis并设置别名
最近两天不知什么原因导致win10的redis 无法通过 双击 redis-server.exe 文件启动 redis服务:于是从新安装并且 通过命令行启动服务,并且设置别名,每次方便启动服务 1.下 ...
- manjaro linux KDE桌面网易云音乐点击托盘图标无反应
这是一个很奇怪的问题,它的解决方法更奇怪... 找到网易云,右键,选择“编辑应用程序” 在打开的窗口中选中应用程序一栏 将“命令”的内容替换为: 1 env XDG_CURRENT_DESKTOP=D ...
- [转载]np.where()使用说明
转载自https://www.cnblogs.com/massquantity/p/8908859.html#4072620 numpy.where() 有两种用法: 1. np.where(cond ...
- POJ1051 P,MTHBGWB
题目来源:http://poj.org/problem?id=1051 题目大意: Morse密码里每个字母用长度不定的点和线来表示,一条信息中字母的编码之间用空隙隔开.下表为Morse密码的编码表: ...
- 读经典——《CLR via C#》(Jeffrey Richter著) 笔记_类型转换
1. C# 不要求任何特殊语法即可将一个对象转换为它的任何基类型,因为向基类型的转换被认为是一种安全的隐式转换: 2. 然而,将对象转换为它的某个派生类型时,C#要求开发人员只能进行显示转换,因为这样 ...
- linux dns高速缓存
1.安装部署dns yum install bind -y systemctl start named systemctl enable named systemctl stop firew ...
- Pycharm在线/手动离线安装第三方库-以scapy为例(本地离线添加已经安装的第三方库通过添加Path实现)
在线安装运行Pycharm,打开需要添加scapy文件的项目,以TestScapy为例 点击工具栏的File选项,选中Settings,单击打开 ...
- TCP/IP、Http、Https、Socket的区别
网络由下往上分为物理层.数据链路层.网络层( IP协议).传输层( TCP协议).会话层.表示层和应用层(HTTP协议) 接下来我来说说个人理解其中的TCP/IP.Http.Socket的区别 TCP ...