<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. Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.socket

    一.解决var/run/mysqld没有pid和sock文件 MySQL下mysql.sock丢失丢失的原因一般是因为配置文件不一致的原因,mysqld 错误启动,mysqld_safe 会清除一次m ...

  2. CI框架源码学习笔记5——Hooks.php

    接着Benchmark.php往下看,下一个引入的文件是Hooks.php,我们称之为钩子.它的目的是在不改变核心文件的基础上,来修改框架的内部运作流程.具体使用方法参见手册http://codeig ...

  3. mysql8.0的新特性

    https://www.cnblogs.com/kevingrace/p/10482469.html MySQL 8 正式版 8.0.11 已发布,官方表示 MySQL 8 要比 MySQL 5.7 ...

  4. Linux安装与分区解释

    Linux安装过程中最重要的就是对硬盘进行分区: Linux是先建立一个根目录“/”,然后在根目录上建立一系列的空目录,接着把硬盘分区挂载到相应目录上. 在linux系统中至少必须有两个挂载点(磁盘分 ...

  5. 【学习笔记】Python 3.6模拟输入并爬取百度前10页密切相关链接

    [学习笔记]Python 3.6模拟输入并爬取百度前10页密切相关链接 问题描述 通过模拟网页,实现百度搜索关键词,然后获得网页中链接的文本,与准备的文本进行比较,如果有相似之处则代表相关链接. me ...

  6. CF E. Vasya and a Tree】 dfs+树状数组(给你一棵n个节点的树,每个点有一个权值,初始全为0,m次操作,每次三个数(v, d, x)表示只考虑以v为根的子树,将所有与v点距离小于等于d的点权值全部加上x,求所有操作完毕后,所有节点的值)

    题意: 给你一棵n个节点的树,每个点有一个权值,初始全为0,m次操作,每次三个数(v, d, x)表示只考虑以v为根的子树,将所有与v点距离小于等于d的点权值全部加上x,求所有操作完毕后,所有节点的值 ...

  7. 321B

    MCMF必须是满足流量最大为前提下的最小费用流(这里是最大费用流) 因此还必须不断地枚举m的流量才行 #include<iostream> #include<algorithm> ...

  8. django中关于静态文件的引入(这边是指边主要是jquery和bootstrap

    一.  创建文件夹 首先在项目的根目录中新建一个文件夹,这个文件夹的名称最好以static命名 二.   修改配置 在项目的settings文件中,拉倒最下面,可以看到 STATICFILES_DIR ...

  9. 问题:git处理中文名称时候显示为编码形式(已解决)

    问题描述: Untracked files: (use "git add <file>..." to include in what will be committed ...

  10. c#之GDI简单实现代码及其实例

    作业:文档形式 3到5页理解 1.理解 2.源代码解释(1到2页) 3.实现效果 项目地址: https://github.com/zhiyishou/polyer Demo:https://zhiy ...