1.jsonp
原生js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
li{
list-style: none;
}
</style>
</head>
<body>
<h1>淘宝提示词</h1>
<input type="text" placeholder="请输入关键词" id="txt"><br>
<ul id="uu"></ul>
<script>
class jsonpTest {
constructor() {
this.txt = txt;
this.list = uu;
this.body = document.body;
this.init();
}
init() {
this.watchTxt();
}
watchTxt() {
this.txt.onkeyup = () => {
if(this.txt.value.length == 0) {
this.list.innerHTML = '';
return;
}
const script = document.createElement('script');
script.src = 'https://suggest.taobao.com/sug?q='+this.txt.value+'&callback=jsonp.sug';
this.body.appendChild(script);
this.body.removeChild(script);
}
}
sug(data) {
var str = '';
data.result.forEach((item, i) => {
str += '<li>' + item[] + '</li>';
})
this.list.innerHTML = str;
}
}
const jsonp = new jsonpTest();
</script>
</body>
</html>
jquery
$(document).ready(function(){
$('#btn').click(function(){
var txt = $('#txt').val();
var url = 'https://suggest.taobao.com/sug?q='+txt;
$.ajax({
url: url,
dataType: 'jsonp',
type: 'get',
success: function(data){
var str='';
if(data.result.length !== 0) {
for(let i=0; i<data.result.length; i++) {
str += '<li>' + data.result[i] + '</li>';
}
$('#uu').html(str);
}else {
str = '未找到关键字';
$('#uu').html(str);
}
}
})
})
})
document.domain+iframe
首先在父窗口上添加document.domain
<script>
document.domain = 'a.com';
</script>
在子窗口里也添加document.domain
<script>
document.domain = 'a.com';
</script>
在火狐浏览器下，要在iframe外面添加一个div
父窗口和子窗口设置相同的二级域名
// 在one中写一个（域名为www.js8.in）
<iframe src="http://work.js8.in/crossdomain/iframe.html" id="iframe" style="display:none;"></iframe>
<script type="text/javascript">
document.domain = 'js8.in';//相同的二级域名
function crossDomain(){
var iframe=document.getElementById('iframe').contentWindow.$;
iframe.get("http://work.js8.in/crossdomain/helloworld.txt",function(data){
document.getElementById("ajax").innerHTML=data;
});
}
</script>
// 在资源 src="http://work.js8.in/crossdomain/iframe.html" iframe.html中设置
document.domain = 'js8.in';//相同的二级域名
postMessage
window.postMessage(msg,targetOrigin)
window: 指目标窗口，可能是window.frames属性的成员或者由window.open方法创建的窗口
message：要发送的消息，html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象，然而并不是所有浏览器都做到了这点儿，部分浏览器只能处理字符串参数，所以我们在传递参数的时候需要使用JSON.stringify()方法对对象参数序列化，在低版本IE中引用json2.js可以实现类似效果
targetOrigin：“目标域“，包括：协议、主机名、端口号。若指定为”*“，则表示可以传递给任意窗口，指定为”/“，则表示和当前窗口的同源窗口。
获取postMessage传来的消息：为页面添加onmessage事件
window.addEventListener('message',function(e) {
}
e的几个重要属性：
1、data：postMessage传递过来的msg
2、发送消息的窗口对象
3、origin：发送消息窗口的源（协议+主机+端口号）
5015
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
