使用代理方式对iframe进行跨域操作
发布在Allenice's blog2014年11月26日view:4233
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

使用代理方式对iframe进行跨域操作

有时候会有这样的需求,通过主页面操作iframe子页面,如果iframe的页面与主页面不在同一个域的话,主页面是不能操作子页面的。由于安全性的问题,iframe不能跨域,也就是说不能使用javascript操作iframe下的不同域的页面。但是如果两个网站可以合作,那么可以通过一个代理页面解决跨域问题。 <!-- more --> 现在举一个案例: A公司开发了一个新的产品,B公司的一个产品中有个模块需要展示A公司这个产品,并且要求可以对页面的某些区域进行高亮。(A公司是小公司,必须听从B公司的要求。。。orz)。 B公司是使用iframe的方式嵌入A公司的页面。 这个案例,需要解决的技术问题是如何在不改变原始页面的情况下,提供一下方法给不同域的父页面操作。 解决方案就是,在A域(A公司产品所在域名)新建一个代理页面(proxy.html),这个页面嵌入一个iframe指向A公司产品页面(indexA.html),然后B公司产品页面(indexB.html)嵌入proxy.html, 通过改变src的hash值和iframe窗口大小通知indexA.html需要进行什么操作。

  1. indexA.html A公司产品页面
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    * { padding: 0; margin: 0; }
    #container { width: 980px; margin: 0 auto; }
    #header { height: 120px; }
    #main { height: 300px; }
    #footer { height: 50px; background-color: #CCC; }
  </style>
</head>
<body>
  <div id="container">
    <div id="header">header</div>
    <div id="main">main</div>
    <div id="footer">footer</div>
  </div>
  <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</body>
</html>
  1. proxy.html 代理页面,与indexA.html同域
<!doctype html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
<iframe id="myHost" src="indexA.html" frameborder="0" width="1000" height="500"></iframe>

<script type="text/javascript">
  var frame = document.getElementById('myHost');

  window.onresize = function () {
    var hash = window.location.hash; // proxy.html?#selector_color --> #selector_color
    if (hash) {
      var action = (hash.split('#')[1]).split('_'); // #selector_color -->  [selector, color]
      frame.contentWindow.$('#' + action[0]).css('background-color', action[1]);
    }
  }
</script>
</body>
</html>
  1. indexB.html B公司产品页面, 与indexA.html不同域
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <iframe id="frame" src="" frameborder="0" width="1000" height="500"></iframe>

  <!-- 操作 -->
  <div>
    <button id="header_blue">header_blue</button>
    <button id="main_red">main_red</button>
    <button id="footer_green">footer_green</button>
  </div>

  <script>
    var src, header, main, footer, frame;

    src = 'http://www.companyA.com/proxy.html';
    header = document.getElementById('header_blue');
    main = document.getElementById('main_red');
    footer = document.getElementById('footer_green');
    frame = document.getElementById('frame');
    frame.src = src;

    // #header_blue  选择器_颜色
    header.onclick = function (){
      frame.src = src + "#header_blue";
      frame.width = parseInt(frame.width) + 1; // 通过改变窗口大小通知proxy.html 这个应该可以找到更好的方法
    }

    main.onclick = function (){
      frame.src = src + "#main_red";
      frame.width = parseInt(frame.width) - 1;
    }

    footer.onclick = function (){
      frame.src = src + "#footer_green";
      frame.width = parseInt(frame.width) + 1; // 通过改变窗口大小通知proxy.html
    }

  </script>

</body>
</html>

原文

评论
发表评论
暂无评论
WRITTEN BY
Allenice
我只是一个单纯的萝莉控,H什么的才没有想过!
TA的新浪微博
PUBLISHED IN
Allenice's blog

我的前端技术博客内容

我的收藏