解决跨域IFrame自适应高度问题

在一个项目中，我们遇到了一个技术挑战：当用户点击不同的菜单按钮时，需要加载合作网站的不同页面到IFrame中，而这些页面由于跨域限制，无法直接调整IFrame的高度以适应内容。为了解决这个问题，我们采取了一种涉及中介页面的方法，通过Javascript和COOKIE来动态调整IFrame的高度。

具体来说，假设我们的网站域名是www.a.com，合作方的网站域名是www.b.com。我们在www.a.com上创建了两个页面：index.php作为主要展示页面，agency.php作为中介页面。这两个页面位于同一目录下。

index.php的HTML结构设计如下，确保每次点击菜单项时都能重新加载IFrame，从而获取最新的内容高度：

  
新闻

  
预测

  
诊断

  
资料

  
公告



  

    
  

  

    
  

  

    
  

  

    
  

此外，我们使用了Javascript来处理菜单项的点击事件，动态设置IFrame的URL，并根据之前的COOKIE记录恢复IFrame的高度：

中介页面agency.php用于接收来自合作网站的IFrame高度信息，并将其存储在COOKIE中，以便后续加载时使用：

合作网站上的代码则负责计算内容的高度，并通过URL传递给中介页面：

// 预测
var iframe = 'picks'; // 不同的IFRAME使用不同的名称
function iframeSethash() {
  var hashH = $(document).height();
  var urlC = 'http://3g.21so.com/agency.php?iframe=' + iframe + '&t=' + Math.random();
  var iframeA = document.getElementById('iframeA');
  if (iframeA) {
    iframeA.src = urlC + '#' + hashH;
  }
}

通过上述方法，我们可以有效地解决跨域IFrame自适应高度的问题，提升用户的浏览体验。