Question

我知道iframe标记可以访问具有相同域+端口的父元素。但是，如果父和iframe有不同的域+端口怎么办？

即

父级域名为http://aaa.com:63342，iframe域名为http://aaa.com:9080。（请注意，他们有不同的端口）

这两个页面的标题中都有<meta http-equiv='X-Frame-Options' content='ALLOWAll'>。

首先，父框架调用iframe与表单提交。像...

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv='X-Frame-Options' content='ALLOWAll'>
  <title>ParentWindows with aaa.com:63342</title>
</head>
<body>
  <form name='form' method='post' id='form' action=''>
      <input type='text' name='greetings' value='Hello from the otherside'>
  </form>
  <script>
      document.form.target = 'iframe';
      document.form.action = 'http://aaa.com:9080//inFrame.jsp';
      document.form.submit();
  </script>
</body>
<iframe src="" name='iframe'></iframe>
</html>

然后服务器在jsp

 <% 
  response.setHeader("X-Frame-Options", "ALLOWAll"); 
  String greetings = request.getParameter("greetings");
%>
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv='X-Frame-Options' content='ALLOWAll'>
  <title>iframe with aaa.com:9080</title>
</head>
<body>
  <div>
      greetings message : <%= greetings %>
  </div>
</body>
<script>
  var div = document.createElement('div');
  div.textContent = 'Echo Hello';
  parent.document.body.appendChild(div);
</script>
</html>

这是我所处的情况的简单版本。但是，当我这样做时，浏览器控制台显示错误，如..

Uncaught SecurityError: Blocked a frame with origin "http://localhost:9080" from accessing a frame with origin "http://localhost:63342". Protocols, domains, and ports must match.

现在我怀疑这种方法（在iframe和父级之间调用不同的主机）可能在第一时间......是否可能？

我该如何使其有效？

非常感谢

Answer 1

绕道到原始画面。

类似......

aaa.com:63342/original.html的原始页面是

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv='X-Frame-Options' content='ALLOWAll'>
  <title>ParentWindows with aaa.com:63342</title>
  <script>
    function setGreetings(greetings){
      document.getElementById('greetings').value = greetings;
    }
  </script>
</head>
<body>
  <form name='form' method='post' id='form' action=''>
      <input type='text' id='greetings' name='greetings' value='Hello from the otherside'>
  </form>
  <script>
      document.form.target = 'iframe';
      document.form.action = 'http://aaa.com:9080//inFrame.jsp';
      document.form.submit();
  </script>
</body>
<iframe src="" name='iframe'></iframe>
</html>

然后导入到原始页面（iframe内部）的页面（jsp）看起来像......我可以调用aaa.com:9080/inFrame.jsp

<% 
  response.setHeader("X-Frame-Options", "ALLOWAll"); 
  String greetings = request.getParameter("greetings");
%>
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv='X-Frame-Options' content='ALLOWAll'>
  <title>iframe with aaa.com:9080</title>
</head>
<body>
  <div>
      greetings message : <%= greetings %>
  </div>
  <iframe id='iframe' src="http://localhost:63342/third.html?greetings=<%= greetings %>"></iframe>
</body>
</html>

这是第三帧aaa.com:63342/third.html，最终

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv='X-Frame-Options' content='ALLOWALL'>
  <title>ACCESS TO TOP FRAME on localhost:63342</title>
</head>
<body>
<script>
    function setGrandfather(){
        var greetings = getParams()['greetings'];
        window.top.setGreetings(greetings);
    }

    //parsing parameters
    function getParams() {
      var param = new Array();
      var url = decodeURIComponent(location.href);
      url = decodeURIComponent(url);
      var params;
      params = url.substring( url.indexOf('?')+1, url.length );
      params = params.split("&");
      var size = params.length;
      var key, value;
      for(var i=0 ; i < size ; i++) {
          key = params[i].split("=")[0];
          value = params[i].split("=")[1];
          param[key] = value;
      }
      return param;
    }
</script>
</body>
</html>

这里发生了什么

原始网页包含具有不同域名的iframe
第二页（iframed在原始页面中）也有一个与原始页面具有相同原点的iframe
第二页将使用post / get将数据发送到iframe（第三页）。我希望它可以通过parent.document或iframe.contentDocument.document访问其他框架元素，但SAMEORIGIN政策会阻止这些框架元素。
在第三页中，您可以访问原始帧的功能和元素，因为它们具有相同的来源（域+端口）。

注意

帧无法直接通信
只有这些网页具有公共网址，可以通过document.domain

iframe可以访问具有不同来源的父元素（域+端口）

1 个答案: