<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. CompressFormat压缩性能

    在产品应用场景内有个需求,Bitmap原图压缩保存.但是每次保存一个图片,需要500+ms.原本以为是sd卡写的慢.后来测试发现是图片压缩问题.试验过CompressFormat PNG和JPEG两种 ...

  2. Jupyter Notebook命令

    Jupyter Notebook命令 1.启动 tensorboard --logdir=2017_05_03_00_12

  3. 用勤哲excel服务器开发设计燃烧器生产行业ERP

    J公司是一家专业从事设计.制造.生产及销售各类燃油燃气燃烧设备和各类冶金燃烧装置的专业公司.2011年随着企业的发展,原来手工操作模式已经很难应付日益增长的工作量. J公司希望通过软件管理实现以下几个 ...

  4. MySQL使用总结

    本篇博客,主要是对MySQL使用的一些总结,会持续更新. MySQL下载安装不再赘述.去官网即可.有企业版和社区版. 用命令行的方式:   1. 先运行MySQL目录的bin下的mysqld.exe ...

  5. Python的主要应用领域及应用场景

    参考链接:https://www.cnblogs.com/kaid/p/9016673.html 正文: Python简介 Python(英国发音:/ˈpaɪθən/美国发音:/ˈpaɪθɑːn/), ...

  6. C语言概述之介绍各种基本概念

    第2章 C语言概述 2.1 C语言示例解释 #include #include<stdio.h> 这一条指令的作用相当于把stdio.h文件的所有内容都输入该行所在的位置. #includ ...

  7. django 请求体和请求体相关知识

    请求头ContentType ContentType指的是请求体的编码类型,常见的类型共有3种: django 如果发送post请求,或者表单提交数据.如果不设置enctype属性. 就会以appli ...

  8. PHP、thinkPHP5.0开发网站文件管理功能(二)删除文件

    1.is_dir():检查指定的文件是否是目录 2.scandir():返回指定目录中的文件和目录数组 3.unlink():删除文件,如果删除的文件不存在会报错,加@抑制报错 public func ...

  9. java——数组队列 ArrayQueue

    队列: Array: package Date_pacage; public class Array<E> { //叫它静态数组 //private int[] data; private ...

  10. Vue.js-----轻量高效的MVVM框架(九、组件利用Props传递数据)

    #使用props传递数据 html:传递普通的字符串 <h3>#使用props传递数据</h3> <div id="dr01"> <div ...