引入的iframe是跨域的, 如何控制其高度

前提是你有编辑这个跨域的iframe的权限!!

1. main-domain.html (main display HTML)
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>main-domain.html</title>
</head>
<body>
<iframe id="js_iframe" src="crossdomain.html" frameborder="0" width="100%" height="0" scrolling="no"></iframe>
</body>
</html>

2. other-domain.html (cross-domain iframe)
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="jquery.js"></script>
  <title>other-domain.html</title>
</head>
<body>
<iframe id="js_iframe_inner" src="" frameborder="0" width="0" height="0" scrolling="no"></iframe>
</body>
</html>
<script>
window.onload = function(){
  //top.js_if.height = $(document).height(); // if cross-domain will throws an exception.
  
  //other method:
  $('#js_iframe_inner').attr('src', 'other-main-domain.html?frameheight=' + $(document).height() );
}
</script>

3.other-main-domain.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="jquery.js"></script>
  <title>other-main-domain.html</title>
</head>
<body>
</body>
</html>
<script>
window.onload = function(){
  top.js_iframe.height = location.href.replace(/[^=]+=/, '');
}
</script>

　　

posted @ 2016-11-07 10:19  roseforyou  阅读(373)  评论(0)  编辑  收藏  举报