JavaScript中postMessage()方法解决跨域问题记录

最新推荐文章于 2024-09-11 07:57:51 发布

cwr888

最新推荐文章于 2024-09-11 07:57:51 发布

阅读量646

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/cwr888/article/details/111184332

版权

JavaScript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

posetMessage的APIhttps://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage
经过测试大部分跨域问题能解决，但input:file单击事件跨域解决不了，测试代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<iframe id="ifrtest" src="http://localhost/index.html"></iframe><br/>
<button class = "clp" onclick = "clp();">跨域问题</button><br/>
<button class = "clp" onclick = "clp0();">解决跨域问题</button><br/>
<button class = "clp" onclick = "clp1();">input:file只能用户操作跨域解决不了</button>
</body>
<script>
    function clp(){
        document.getElementById('ifrtest').contentWindow.clp();
    }
    function clp0(){
        document.getElementById('ifrtest').contentWindow.postMessage("clp0", "http://localhost/index.html");
    }
    function clp1(){
        document.getElementById('ifrtest').contentWindow.postMessage("clp1", "http://localhost/index.html");
    }
</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="file" id="input">
<button class = "clp" onclick = "clp();">clp</button>
</body>
<script>
    function clp(){
        window.alert("测试");
    }
    function clp1(){
        return  document.getElementById("input").click();
    }

    document.getElementById("input").addEventListener("focus",function () {
        console.log("focus");
    });
 
    document.getElementById("input").addEventListener("mousedown",function () {
        console.log("mousedown");
    });
 
    document.getElementById("input").addEventListener("mouseup",function () {
        console.log("mouseup");
    });
 
    document.getElementById("input").addEventListener("input",function () {
        console.log("input");
    });
 
    document.getElementById("input").addEventListener("change",function () {
        console.log("change");
    });
 
    document.getElementById("input").addEventListener("blur",function () {
        console.log("blur");
    });
 
    document.getElementById("input").addEventListener("click",function () {
        console.log("click");
    });
 
window.addEventListener("message", receiveMessage, false);

function receiveMessage(event)
{
  // For Chrome, the origin property is in the event.originalEvent
  // object. 
  // 这里不准确，chrome没有这个属性
  // var origin = event.origin || event.originalEvent.origin; 
  var origin = event.origin
  if (origin !== "http://localhost/index.html"){
    var value = event.data;
      if(value == "clp")
        clp();
      else if (value == "clp0")
        clp();
      else if (value == "clp1")
        clp1();
  }
  // ...
}
</script>
</html>