拦截iframe消息嵌套iframe,跨域

Jua*_*iso 6 javascript iframe cross-domain

我有一个来自domain1.com的网页,我有一个domain2.com的iframe然后我在domain3.com的domain2.com里面有另一个iframe

我想在domain2.com拦截来自domain3.com的消息,如果domain2.com不在domain1.com内,则消息被正确接收,但如果我在domain1.com内有domain2.com则来自domain3.com的消息由domain1.com而不是domain2.com收到.有没有办法在domain2.com内捕获这些消息?

结构是这样的

domain1.com里面有iframe src ="domain2.com"domain2.com里面有iframe src ="domain3.com"

当我直接访问domain2.com时它捕获domain3.com消息,当我访问domain1.com时,domain3.com发送的消息由domain1.com而不是domain2.com接收

dys*_*unc 5

我试图重新创建你的iframe地狱.希望这是你正在寻找的.这应该涵盖您上面列出的方案.如果我误解了什么,请告诉我.

我也创造了一个Plunker

index.html(domain1)

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
</head>

<body>
  domain 1

  <form id="form">
    <input type="text" placeholder="Enter message" name="message">
    <input type="submit" value="Click to send">
  </form>

  <iframe src="domain2.html" id="iframe" style="display:block;height:120px"></iframe>

  <script>
    window.addEventListener('message', function(event){
      const [message, domain] = event.data.split('|');
      alert(`domain1: Received ${message} from ${domain}`);
    });

    form.onsubmit = function() {
      iframe.contentWindow.postMessage(`${this.message.value}|domain1`, '*');
      return false;
    };
  </script>

</body>
</html>
Run Code Online (Sandbox Code Playgroud)

domain2.html

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
</head>

<body>
  domain 2

  <form id="form">
    <input type="text" placeholder="Enter message" name="message">
    <input type="submit" value="Click to send">
  </form>

  <iframe src="domain3.html" id="iframe" style="display:block;height:60px"></iframe>

  <script>
    window.addEventListener('message', function(event){
      const [message, domain] = event.data.split('|');
      alert(`domain2: Received ${message} from ${domain}`);
    });


    form.onsubmit = function() {
      iframe.contentWindow.postMessage(`${this.message.value}|domain2`, '*');
      return false;
    };
  </script>

</body>
</html>
Run Code Online (Sandbox Code Playgroud)

domain3.html

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
</head>

<body>

  domain 3

  <form id="form">
    <input type="text" placeholder="Enter message" name="message">
    <input type="submit" value="Click to send">
  </form>

  <script>
  window.addEventListener('message', function(event){
      const [message, domain] = event.data.split('|');
      alert(`domain3: Received ${message} from ${domain}`);
    });

    form.onsubmit = function() {
      window.parent.postMessage(`${this.message.value}|domain3`, '*');
      return false;
    };
  </script>

</body>
</html>
Run Code Online (Sandbox Code Playgroud)