<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. 《图解HTTP》阅读笔记--第六章--HTTP首部

    第六章.HTTP首部 <非常重要且恐怖的一章了> HTTP报文=报文首部+(CR+LF)+报文实体 首部字段:HTTP报文首部字段=(首部字段名:字段值)们---类型*4: 通用首部字段( ...

  2. Leetcode 91. Decode Ways 解码方法(动态规划,字符串处理)

    Leetcode 91. Decode Ways 解码方法(动态规划,字符串处理) 题目描述 一条报文包含字母A-Z,使用下面的字母-数字映射进行解码 'A' -> 1 'B' -> 2 ...

  3. nginx+uwsgi01---flask部署

    1.uwsgi.ini [uwsgi] # uwsgi 启动时所使用的地址与端口注意socket与http不同,http可以被外网访问0. socket = # 指向网站目录 chdir = /hom ...

  4. shell脚本安装jdk

    #!/bin/bash BASE_SERVER=192.168.1.11 yum install -y wget wget $BASE_SERVER/soft-all/jdk-7u45-linux-x ...

  5. vue.js使用elemnetUi

    安装: npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i element-ui -S 引入 Element 你可以引入整个 Element,或是 ...

  6. Navicat12破解

    Navicat12破解 http://www.sdbeta.com/xiazai/2017/0818/209765.html

  7. Django 10 GET和POST(HttpRequest对象,GET和POST请求,文件上传,HttpResponse对象的cookie)

    Django 10 GET和POST(HttpRequest对象,GET和POST请求,文件上传,HttpResponse对象的cookie) 一.HttpRequest对象 #HttpRequest ...

  8. html样式

    <!doctype html> <html> <head> <style id="mceDefaultStyles" type=" ...

  9. C++ vector类型要点总结(以及各种algorithm算法函数)

    概述 C++内置的数组支持容器的机制,但是它不支持容器抽象的语义.要解决此问题我们自己实现这样的类.在标准C++中,用容器向量(vector)实现. 容器向量也是一个类模板.vector是C++标准模 ...

  10. mc04_IntelliJ IDEA常用设置

    字体设置 File --> Settings --> Font 项目编码设置 File --> Settings --> File Encodings 项目依赖 即一个项目引用 ...