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

最新推荐文章于 2022-08-03 18:47:27 发布

weixin_30535565

最新推荐文章于 2022-08-03 18:47:27 发布

阅读量132

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zlog/p/6037770.html

前提是你有编辑这个跨域的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>

转载于:https://www.cnblogs.com/zlog/p/6037770.html