<form> 
   <p> 
    <label for="message" style="color:red;font-size:24px;">给iframe子窗口发一个信息：</label> 
    <input type="text" name="message" value="send" id="message" /> 
    <input type="submit" value="submit" id="submit"/> 
   </p> 
</form> 
<h4>目标iframe传来的信息：</h4> 
<p id="test">暂无信息</p> 
 <iframe id="iframe" 
  src="/UploadFiles/2021-04-02/def.html">

JS代码如下：


var win = document.getElementById("iframe").contentWindow;
document.getElementById("submit").onclick = function(e){
  e.preventDefault();
  win.postMessage(document.getElementById("message").value,"http://longen.example.com"); 
} 
window.addEventListener("message",function(e){
   e.preventDefault();
   document.getElementById("test").innerHTML = "从" + e.origin + "那里传过来的消息:\n" + e.data;
},false);


Def.html代码如下：
HTML代码：


<form> 
   <p> 
    <label for="message">给父窗口abc.html发个信息：</label> 
    <input type="text" name="message" value="send" id="message" /> 
    <input type="submit" /> 
   </p> 
 </form> 
 <p id="test2">暂无信息。</p>


JS代码如下：


var parentwin = window.parent; 
window.addEventListener("message",function(e){
    document.getElementById("test2").innerHTML = "从父窗口传来的域" +e.origin + "，和内容数据：" + e.data; 
    parentwin.postMessage('HI!你给我发了"<span>'+e.data+'"</span>。',"http://abc.example.com");
},false);


当我点击abc.html页面后，可以看到效果如下，从def.html返回内容了。如下：

我们需要知道如下几条信息：
通过对window对象的message事件进行监听，可以接收消息。

通过访问message事件的origin属性，可以获取消息的发送源。

通过访问message事件的data属性，可以取得消息内容。

使用postMessage方法发送消息。

通过访问message事件的source属性，可以获取消息发送源的窗口对象(准确的说，应该是窗口的代理对象)。

有了上面的基本知识点，我们可以延伸为实现ajax POST跨域的问题。
二：使用postMessage 知识点解决 ajax中POST跨域问题。
原理：原理也很简单，假如我们的域名abc.example.com下的abc.html页面需要发ajax请求(跨域，域名为longen.example.com)下，那么我们还是先跨页面文档的形式，和上面一样，我们可以现在longen.example.com下 建立一个页面，比如叫def.html. 那么我们现在还是在 abc.html 页面嵌入一个隐藏域iframe src路径指向longen.example.com域下def,html页面。过程还是和跨文档类似，只是现在在def.html页面中 在window.onmessage 事件内写ajax请求即可，如下代码：
abc.example.com下的abc.html页面如下：
html代码和上面一样，下面是JS代码：


var win = document.getElementById("iframe").contentWindow;
document.getElementById("submit").onclick = function(e){
   e.preventDefault();
   win.postMessage(document.getElementById("message").value,"http://longen.example.com/"); 
} 
window.addEventListener("message",function(e){
  e.preventDefault();
  alert(typeof e.data)
  var json = JSON.parse(e.data);
   console.log(json);
  alert(json.url)
},false);


def.html代码如下：
JS代码如下：


//获取跨域数据 
window.onmessage = function(e){ 
   $.ajax({
     url: 'http://longen.example.com/webSocket/test.php',
     type:'POST',
     dataType:'text',
     //data: {msg:e.data},
     success: function(res) {
        var parentwin = window.parent; 
        parentwin.postMessage(res,"http://abc.example.com");//跨域发送数据 
     }
   });
 };




test.php代码如下：


<"xx"
 );
 echo json_encode($data);
?>


如上实现方式 就可以实现ajax post跨域了。
以上内容是关于使用HTML5中postMessage知识点解决Ajax中POST跨域问题的相关介绍，希望大家喜欢。