JSONP：
JSONP是JSON with padding（填充式JSON或参数式JSON）的简写，是应用JSON的新方法，其利用

请求端和服务端共同约定使用自定义函数，而不是内置函数；例如b.com/jsonptest.php：

echo 'handlerJSONP({"name":"王唯","age":18})';

请求端实现handlerJSONP()函数，并使用

一般来说，后端程序通过查询字符串允许客户端指定一个函数名，然后用这个函数名去填充响应，例如：

b.com/jsonptest.php：

欢迎大家来到IT世界,在知识的湖畔探索吧!header('Content-type: application/json');
//获取回调函数名
$callback = htmlspecialchars($_REQUEST['callback']);
//json数据
$json_data = '["王唯","静静","娟子","大国"]';
//输出jsonp格式的数据
echo $callback . "(" . $json_data . ")";

JSONP是通过动态

JSONP的不足：

• 首先，JSONP是从其他域中加载代码执行，如果其他域不安全，很可能会在响应中夹带一些恶意代码；因此在使用不是你自己运维的Web服务时，一定得保证它安全可靠；
• 其次，只能进行GET请求；
• 最后，要确定JSONP请求是否失败比较麻烦，虽然HTML5给

  b.com/ message.html：

  欢迎大家来到IT世界,在知识的湖畔探索吧!
  b.com/message.html

  语法：otherWindow.postMessage(message, targetOrigin, [transfer]);

  • otherWindow为其他窗口的一个引用；
  • message参数：将要发送到其他window的数据；它将会被结构化克隆算法序列化，即可以不受限制的将数据对象安全的传送给目标窗口而无需自己序列化；
  • targetOrigin：通过窗口的origin属性来指定哪些窗口能接收到消息事件，其值可以是字符串"*"（表示无限制）或者一个URI；
  • transfer参数：可选，是一串和message同时传递的Transferable对象，这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权；

  例如：a.com/post.html：

  // ...
  win.postMessage("来自a.com/post.html的消息","*");
  b.com/message.html：
  window.addEventListener("message", function(event){
  console.log(event); // MessageEvent
  });

  需要延迟执行postMessage()方法，延迟的方式有多种，使用setTimeout()、iframe的onload事件、发送者的onload事件或者使用按钮的click事件处理程序，如a.com/post.html：

  欢迎大家来到IT世界,在知识的湖畔探索吧!setTimeout(function(){
  win.postMessage("来自a.com/post.html的消息","*");
  },500);
  // 或：
  var iframe = document.getElementsByTagName("iframe")[0];
  iframe.onload = function() {
  var iframe = document.getElementById("iframe");
  var win = iframe.contentWindow;
  win.postMessage("来自a.com/post.html的消息","*");
  }
  // 或：
  var btnSend = document.getElementById("btnSend");
  btnSend.addEventListener("click", function(){
  var iframe = document.getElementsByTagName("iframe")[0];
  var win = iframe.contentWindow;
  win.postMessage("来自a.com/post.html的消息","*");
  });

  使用postMessage()将数据发送到其他窗口时，最好指定明确的targetOrigin，而不是*，原因是恶意网站可以在用户不知情的情况下更改窗口的位置，甚至可以拦截所发送的数据；

  win.postMessage("来自a.com/post.html的消息","http://www.b.com"); // 或
  win.postMessage("来自a.com/post.html的消息","http://www.b.com/"); // 或
  win.postMessage("来自a.com/post.html的消息","http://www.b.com/error.html");

  在发送消息的时候，如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配targetOrigin的值，那么消息就不会被发送；只有三者完全匹配，消息才会被发送；这个机制用来控制消息可以发送到哪些窗口。

  MessageEvent接口：
  代表一段被目标对象接收的消息；
  属性：
  
  

  • data属性：其保存着由发送者发送的字符串数据；
  • lastEventId属性：表示事件的唯一ID；
  • origin属性：返回一个表示消息发送者来源；
  • ports属性：MessagePort对象数组，表示消息正通过特定通道（数据通道）发送的相关端口；
  • source属性：是一个MessageEventSource对象，代表消息发送者；

  欢迎大家来到IT世界,在知识的湖畔探索吧!window.addEventListener("message", function(event){
  console.log(event);
  console.log(event.data); // 来自a.com/post.html的消息
  console.log(event.lastEventId); // 空
  console.log(event.origin); // http://www.a.com
  console.log(event.ports); // []
  console.log(event.source); // window http://www.a.com/post.html
  });

  如果不希望接收message，就不要实现message事件；如果希望从其他网站接收message，最好使用origin或source属性验证消息发送者的身份；如：

  window.addEventListener("message", function(event){ if(event.origin != "http://www.a.com") return; console.log(event.data); });

  欢迎大家来到IT世界,在知识的湖畔探索吧!
  
  

  b.com/message.html：

  window.addEventListener("message", function(event){ if(event.origin != "http://www.a.com") return; console.log("b.com收到：" + event.data); event.source.postMessage("b.com/message回发的消息", event.origin); });

  欢迎大家来到IT世界,在知识的湖畔探索吧!btnOpen.addEventListener("click", function(){
  var win = window.open("http://www.b.com/message.html","_blank","width:600px,height:400px");
  setTimeout(function(){
  win.postMessage("从a.com中打开","http://www.b.com");
  },1000);
  });
  window.addEventListener("message", function(event){
  console.log("a.com收到：" + event.data);
  });

  或者反向发送消息，例如a.com/post.html：

  var btnOpen = document.getElementById("btnOpen");
  btnOpen.addEventListener("click", function(){
  var win = window.open("http://www.b.com/message.html","_blank","width:600px,height:400px");
  });
  window.addEventListener("message", function(event){
  console.log("a.com收到：" + event.data);
  });

  b.com/message.html：

  欢迎大家来到IT世界,在知识的湖畔探索吧!

  postMessage()还可以发送结构化数据，该数据将会自动被（结构化克隆算法）序列化，如：

  var btn = document.getElementById("btn"); btn.addEventListener("click", function(){ var iframe = document.getElementById("iframe"); var win = iframe.contentWindow; var person = { name:"wanwei", sex: true, age: 18, friends: ["jingjing","daguo"], // smoking: function(){console.log(this.name)}, // 异常 could not be cloned. other1: undefined, other2: null } win.postMessage(person,"http://www.b.com/");

  b.com/message.html：

  欢迎大家来到IT世界,在知识的湖畔探索吧!window.addEventListener("message", function(event){ console.log("b.com收到："); console.log(event.data); });

  因为是跨域，所以即使取得外源窗口的window对象，也无法操作对方的DOM，但是通过接收到的消息，自行构建DOM；

  例如a.com/post.html：

  var btn = document.getElementById("btn");
  btn.addEventListener("click", function(){
  var iframe = document.getElementById("iframe");
  var win = iframe.contentWindow;
  var person = {
  name:"wanwei",
  sex: true,
  age: 18,
  friends: ["jingjing","daguo"],
  }
  win.postMessage(person,"http://www.b.com/");
  });
  window.addEventListener("message", function(event){
  if(event.origin == "http://www.b.com"){
  if(event.data.state){
  document.getElementById("btn").setAttribute("disabled",true);
  // ...
  }
  }
  });
  b.com/message.html：
  window.addEventListener("message", function(event){
  if(event.origin == "http://www.a.com"){
  var person = event.data;
  var h1 = document.createElement("h1");
  h1.innerText = person.name + "信息";
  document.body.appendChild(h1);
  var p = document.createElement("p");
  p.innerHTML = "性别：" + (person.sex ? "男" : "女");
  p.innerHTML += "
  年龄：" + person.age;
  p.innerHTML += "
  朋友：" + person.friends.join(",");
  document.body.appendChild(p);
  event.source.postMessage({state:1}, event.origin);
  }
  });

  示例，后台管理的应用，main.html：

  欢迎大家来到IT世界,在知识的湖畔探索吧!
  
  
  
  控制台
  系统设置
  
  
  
  
  
  是否确认保存？
  
  
  
  

  console.html：

  控制台

  content.html：

  欢迎大家来到IT世界,在知识的湖畔探索吧! 
   
  设置1：
   
  设置2：
   
  设置3：
   
  设置4：
   
   
   

  示例，修改信息：

  content.html：
  
  用户信息
  ID：001
  姓名：王唯 
  单位：零点网络
  地址：
  电话：
  
  
  

  editInfo.html：

  欢迎大家来到IT世界,在知识的湖畔探索吧!
    
  姓名：
   
  性别：男 女
   
  年龄：
   
   
   
   

  editInfo.php：

  query($sql); $row = mysqli_fetch_array($result); echo json_encode($row); }elseif($_REQUEST['action'] == 'update'){ $ID = intval($_POST['ID']); $username = $_POST['username']; $sex = $_POST['sex']; $age = $_POST['age']; $sql = "update users set username='$username', sex='$sex', age='$age' where ID=$ID"; $result = $conn->query($sql); if($result){ echo '{"status": 1}'; }else{ echo '{"status": 0}'; } }

  超链接打开的窗口也可使用postMessage()方法进行通信，但需要设置a标签的target属性为自定义值，如：

  欢迎大家来到IT世界,在知识的湖畔探索吧!
  零点程序员
  b.com/content.html：
  console.log(window.opener); // Window or global
  console.log(window.name); // "mywin"

  发送消息，b.com/content.html：

  if(window.opener){ console.log(window.opener); window.opener.postMessage("我已经打开了","*"); }

  主页面：

  欢迎大家来到IT世界,在知识的湖畔探索吧!window.addEventListener("message", function(event){ console.log(event.data); });

  

  
  
  欢迎大家来到IT世界,在知识的湖畔探索吧!

  免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://itzsg.com/92726.html